@firecms/collection_editor 3.0.0 → 3.1.0-canary.02232f4

package/src/ui/collection_editor/AICollectionGeneratorPopover.tsx

@@ -0,0 +1,243 @@
+import React, { useState } from "react";
+import { EntityCollection, useNavigationController, useSnackbarController, AIIcon, useTranslation } from "@firecms/core";
+import {
+    Button,
+    CircularProgress,
+    IconButton,
+    Menu,
+    SendIcon,
+    TextField,
+    Typography
+} from "@firecms/ui";
+import {
+    CollectionGenerationCallback,
+    CollectionGenerationApiError,
+    CollectionOperation
+} from "../../api/generateCollectionApi";
+import { PersistedCollection } from "../../types/persisted_collection";
+
+export interface AICollectionGeneratorPopoverProps {
+    /**
+     * Current collection being edited (if modifying an existing collection)
+     */
+    existingCollection?: PersistedCollection;
+
+    /**
+     * Callback when a collection is generated or modified.
+     * Includes the collection and optionally the operations that were applied.
+     */
+    onGenerated: (collection: EntityCollection, operations?: CollectionOperation[]) => void;
+
+    /**
+     * Callback function for generating/modifying collections.
+     * The plugin is API-agnostic - the consumer provides the implementation.
+     */
+    generateCollection: CollectionGenerationCallback;
+
+    /**
+     * Optional custom trigger button. If not provided, a default AI button is used.
+     */
+    trigger?: React.ReactNode;
+
+    /**
+     * Size of the button
+     */
+    size?: "small" | "medium" | "large";
+
+    /**
+     * Whether to show the label text
+     */
+    showLabel?: boolean;
+
+    /**
+     * Optional analytics callback
+     */
+    onAnalyticsEvent?: (event: string, params?: object) => void;
+}
+
+export function AICollectionGeneratorPopover({
+    existingCollection,
+    onGenerated,
+    generateCollection,
+    trigger,
+    size = "small",
+    showLabel = true,
+    onAnalyticsEvent
+}: AICollectionGeneratorPopoverProps) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [prompt, setPrompt] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const { t } = useTranslation();
+    const navigation = useNavigationController();
+    const snackbarController = useSnackbarController();
+
+    const existingCollections = navigation.collections ?? [];
+
+    const handleGenerate = async () => {
+        if (!prompt.trim()) return;
+
+        setLoading(true);
+        setError(null);
+
+        const mode = existingCollection ? "modify" : "create";
+        onAnalyticsEvent?.("ai_collection_generate_start", { mode });
+
+        try {
+            const collectionsContext = existingCollections.map(c => ({
+                path: c.path,
+                id: c.id,
+                name: c.name,
+                properties: c.properties,
+                propertiesOrder: c.propertiesOrder
+            }));
+
+            const result = await generateCollection({
+                prompt: prompt.trim(),
+                existingCollections: collectionsContext.slice(0, 30),
+                ...(existingCollection && {
+                    existingCollection: {
+                        path: existingCollection.path,
+                        id: existingCollection.id,
+                        name: existingCollection.name,
+                        properties: existingCollection.properties,
+                        propertiesOrder: existingCollection.propertiesOrder
+                    }
+                })
+            });
+
+            onGenerated(result.collection, result.operations);
+            setMenuOpen(false);
+            setPrompt("");
+            onAnalyticsEvent?.("ai_collection_generate_success", {
+                mode,
+                operationsCount: result.operations?.length
+            });
+            snackbarController.open({
+                type: "success",
+                message: existingCollection
+                    ? "Collection updated with AI suggestions"
+                    : "Collection generated successfully"
+            });
+        } catch (e) {
+            console.error("Error generating collection:", e);
+            const errorMessage = e instanceof CollectionGenerationApiError
+                ? e.message
+                : "Failed to generate collection. Please try again.";
+            setError(errorMessage);
+            onAnalyticsEvent?.("ai_collection_generate_error", {
+                mode,
+                error: errorMessage
+            });
+            snackbarController.open({
+                type: "error",
+                message: errorMessage
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleGenerate();
+        }
+    };
+
+    const defaultTrigger = showLabel ? (
+        <Button
+            variant="text"
+            size={size}
+            disabled={loading}
+            startIcon={loading
+                ? <CircularProgress size="smallest" />
+                : <AIIcon size="small" />
+            }
+        >
+            {t("ai_assist")}
+        </Button>
+    ) : (
+        <IconButton
+            size={size}
+            disabled={loading}
+            aria-label={t("ai_assist")}
+        >
+            {loading
+                ? <CircularProgress size="smallest" />
+                : <AIIcon size="small" />
+            }
+        </IconButton>
+    );
+
+    return (
+        <Menu
+            open={menuOpen}
+            onOpenChange={(open) => {
+                setMenuOpen(open);
+                if (!open) {
+                    setError(null);
+                }
+            }}
+            trigger={trigger ?? defaultTrigger}
+        >
+            <div className="p-4 flex flex-col gap-3 min-w-[360px] max-w-[480px]">
+                <div className="flex items-center gap-2">
+                    <AIIcon size="small" />
+                    <Typography variant="subtitle2">
+                        {existingCollection ? t("modify_collection_with_ai") : t("generate_collection_with_ai")}
+                    </Typography>
+                </div>
+
+                <Typography variant="caption" color="secondary">
+                    {existingCollection
+                        ? t("describe_changes_to_make")
+                        : t("describe_collection_to_create")
+                    }
+                </Typography>
+
+                <TextField
+                    size="small"
+                    multiline
+                    autoFocus
+                    className="w-full text-text-primary dark:text-text-primary-dark"
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder={existingCollection
+                        ? t("ai_placeholder_modify")
+                        : t("ai_placeholder_create")
+                    }
+                    disabled={loading}
+                />
+
+                {error && (
+                    <Typography variant="caption" className="text-red-500">
+                        {error}
+                    </Typography>
+                )}
+
+                <div className="flex justify-end gap-2">
+                    <Button
+                        variant="text"
+                        size="small"
+                        onClick={() => setMenuOpen(false)}
+                        disabled={loading}
+                    >
+                        {t("cancel")}
+                    </Button>
+                    <Button
+                        variant="filled"
+                        size="small"
+                        onClick={handleGenerate}
+                        disabled={!prompt.trim() || loading}
+                        startIcon={loading ? <CircularProgress size="smallest" /> : undefined}
+                    >
+                        {loading ? t("generating") : t("generate_with_ai")}
+                    </Button>
+                </div>
+            </div>
+        </Menu>
+    );
+}

package/src/ui/collection_editor/AIModifiedPathsContext.tsx

@@ -0,0 +1,88 @@
+import React, { createContext, useCallback, useContext, useState } from "react";
+import { CollectionOperation } from "../../api/generateCollectionApi";
+
+export interface AIModifiedPathsContextType {
+    /** Set of paths that were modified by AI */
+    modifiedPaths: Set<string>;
+    /** Counter that increments each time AI modifies the collection - use in keys to force remount */
+    generationCounter: number;
+    /** Add paths from operations */
+    addModifiedPaths: (operations: CollectionOperation[]) => void;
+    /** Clear a specific path (when user edits that field) */
+    clearPath: (path: string) => void;
+    /** Clear all paths (on save or cancel) */
+    clearAllPaths: () => void;
+    /** Check if a path is modified */
+    isPathModified: (path: string) => boolean;
+}
+
+const AIModifiedPathsContext = createContext<AIModifiedPathsContextType | null>(null);
+
+export function AIModifiedPathsProvider({ children }: { children: React.ReactNode }) {
+    const [modifiedPaths, setModifiedPaths] = useState<Set<string>>(new Set());
+    const [generationCounter, setGenerationCounter] = useState(0);
+
+    const addModifiedPaths = useCallback((operations: CollectionOperation[]) => {
+        setModifiedPaths(prev => {
+            const newSet = new Set(prev);
+            operations.forEach(op => {
+                // Add the path and all parent paths for nested modifications
+                newSet.add(op.path);
+                // For properties modifications, also mark the property itself
+                // e.g., "properties.email.description" -> also adds "properties.email"
+                const parts = op.path.split(".");
+                if (parts[0] === "properties" && parts.length >= 2) {
+                    newSet.add(`properties.${parts[1]}`);
+                }
+            });
+            return newSet;
+        });
+        // Increment counter to force property form remount
+        setGenerationCounter(prev => prev + 1);
+    }, []);
+
+    const clearPath = useCallback((path: string) => {
+        setModifiedPaths(prev => {
+            const newSet = new Set(prev);
+            // Remove exact path and any child paths
+            for (const p of newSet) {
+                if (p === path || p.startsWith(path + ".")) {
+                    newSet.delete(p);
+                }
+            }
+            return newSet;
+        });
+    }, []);
+
+    const clearAllPaths = useCallback(() => {
+        setModifiedPaths(new Set());
+    }, []);
+
+    const isPathModified = useCallback((path: string): boolean => {
+        // Check if this exact path or any parent path is modified
+        if (modifiedPaths.has(path)) return true;
+        // Check if any child paths are modified
+        for (const p of modifiedPaths) {
+            if (p.startsWith(path + ".")) return true;
+        }
+        return false;
+    }, [modifiedPaths]);
+
+    return (
+        <AIModifiedPathsContext.Provider value={{
+            modifiedPaths,
+            generationCounter,
+            addModifiedPaths,
+            clearPath,
+            clearAllPaths,
+            isPathModified
+        }}>
+            {children}
+        </AIModifiedPathsContext.Provider>
+    );
+}
+
+export function useAIModifiedPaths(): AIModifiedPathsContextType | null {
+    return useContext(AIModifiedPathsContext);
+}
+