@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/collection_editor/ui/NewCollectionCard.tsx

@@ -0,0 +1,53 @@
+import {
+    useAuthController,
+    useTranslation
+} from "@rebasepro/core";
+import { PluginHomePageAdditionalCardsProps } from "@rebasepro/types";
+import { Card, cls, Typography } from "@rebasepro/ui";
+import { PlusIcon } from "lucide-react";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+export function NewCollectionCard({
+    group,
+    context
+}: PluginHomePageAdditionalCardsProps) {
+
+    if (!context.navigationStateController?.topLevelNavigation)
+        return null;
+
+    const authController = useAuthController();
+
+    const collectionEditorController = useCollectionEditorController();
+    const { t } = useTranslation();
+    const canCreateCollections = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user
+        }).createCollections
+        : true;
+
+    return (
+        <Card className={cls("h-full p-4 min-h-[124px]")}
+            onClick={collectionEditorController && canCreateCollections
+                ? () => collectionEditorController.createCollection({
+                    initialValues: group ? { group } : undefined,
+                    parentCollectionIds: [],
+                    redirect: true,
+                    sourceClick: "new_collection_card"
+                })
+                : undefined}>
+
+            <div
+                className="flex items-center justify-center h-full w-full grow flex-col">
+                <PlusIcon className="text-primary"/>
+                <Typography color="primary"
+                    variant={"caption"}
+                    className={"font-medium"}>{t("studio_new_collection_add").toUpperCase()}</Typography>
+
+                {!canCreateCollections &&
+                    <Typography variant={"caption"}>{t("studio_new_collection_no_permission")}</Typography>
+                }
+            </div>
+
+        </Card>
+    );
+}

package/src/collection_editor/ui/PropertyAddColumnComponent.tsx

@@ -0,0 +1,53 @@
+import {
+    useAuthController,
+    useTranslation
+} from "@rebasepro/core";
+import { getDefaultPropertiesOrder } from "../_cms_internals";
+import { EntityCollection, EntityTableController } from "@rebasepro/types";
+import { Tooltip } from "@rebasepro/ui";
+import { PlusIcon } from "lucide-react";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+export function PropertyAddColumnComponent({
+    path,
+    parentCollectionIds,
+    collection,
+    tableController
+}: {
+    path: string,
+    parentCollectionIds: string[],
+    collection: EntityCollection;
+    tableController: EntityTableController;
+}) {
+
+    const authController = useAuthController();
+    const collectionEditorController = useCollectionEditorController();
+    const { t } = useTranslation();
+    const canEditCollection = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true;
+
+    return (
+        <Tooltip
+            asChild={true}
+            title={canEditCollection ? t("studio_property_add_column") : t("studio_property_add_column_no_permission")}>
+            <div
+                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100/40 bg-surface-100/40 hover:bg-surface-100 dark:bg-surface-900 dark:bg-opacity-40 dark:bg-surface-900/40 dark:hover:bg-surface-800"}
+                // className={onHover ? "bg-white dark:bg-surface-900" : undefined}
+                onClick={() => {
+                    collectionEditorController.editProperty({
+                        editedCollectionId: collection.slug,
+                        parentCollectionIds,
+                        currentPropertiesOrder: getDefaultPropertiesOrder(collection),
+                        collection,
+                        existingEntities: tableController.data
+                    });
+                }}>
+                <PlusIcon/>
+            </div>
+        </Tooltip>
+    )
+}

package/src/collection_editor/ui/collection_editor/AICollectionGeneratorPopover.tsx

@@ -0,0 +1,246 @@
+
+import { AIIcon } from "@rebasepro/core";
+import { useCollectionRegistryController } from "../../_cms_internals";
+import React, { useState } from "react";
+import { useSnackbarController } from "@rebasepro/core";
+import { EntityCollection } from "@rebasepro/types";
+import { Button, CircularProgress, IconButton, Menu, TextField, Tooltip, Typography } from "@rebasepro/ui";
+import { SendIcon } from "lucide-react";
+import {
+    CollectionGenerationCallback,
+    CollectionGenerationApiError,
+    CollectionOperation
+} from "../../api/generateCollectionApi";
+import { useCollectionsConfigController } from "../../useCollectionsConfigController";
+
+export interface AICollectionGeneratorPopoverProps {
+    /**
+     * Current collection being edited (if modifying an existing collection)
+     */
+    existingCollection?: EntityCollection<any>;
+
+    /**
+     * 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 | any;
+
+    /**
+     * 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 collectionRegistry = useCollectionRegistryController();
+    const configController = useCollectionsConfigController();
+    const snackbarController = useSnackbarController();
+
+    const existingCollections = collectionRegistry.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 => ({
+                slug: c.slug,
+                name: c.name,
+                properties: c.properties,
+                propertiesOrder: c.propertiesOrder
+            }));
+
+            const result = await generateCollection({
+                prompt: prompt.trim(),
+                existingCollections: collectionsContext.slice(0, 30),
+                ...(existingCollection && {
+                    existingCollection: {
+                        slug: existingCollection.slug,
+                        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 tooltipTitle = configController?.readOnly
+        ? (configController.readOnlyReason || "Collection generation is disabled")
+        : undefined;
+
+    const defaultTrigger = showLabel ? (
+        <Tooltip title={tooltipTitle} asChild={true}>
+            <Button
+                variant="text"
+                size={size}
+                disabled={loading || configController?.readOnly}
+                startIcon={loading
+                    ? <CircularProgress size="smallest"/>
+                    : <AIIcon size="small"/>
+                }
+            >
+                AI Assist
+            </Button>
+        </Tooltip>
+    ) : (
+        <Tooltip title={tooltipTitle} asChild={true}>
+            <IconButton
+                size={size}
+                disabled={loading || configController?.readOnly}
+                aria-label="AI Assist"
+            >
+                {loading
+                    ? <CircularProgress size="smallest"/>
+                    : <AIIcon size="small"/>
+                }
+            </IconButton>
+        </Tooltip>
+    );
+
+    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 ? "Modify Collection with AI" : "Generate Collection with AI"}
+                    </Typography>
+                </div>
+
+                <Typography variant="caption" color="secondary">
+                    {existingCollection
+                        ? "Describe the changes you want to make to this collection."
+                        : "Describe the collection you want 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
+                        ? "e.g., Add a thumbnail image field with storage, make price required..."
+                        : "e.g., Create a products collection with name, price, description, and category..."
+                    }
+                    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}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="filled"
+                        size="small"
+                        onClick={handleGenerate}
+                        disabled={!prompt.trim() || loading}
+                        startIcon={loading ? <CircularProgress size="smallest"/> : undefined}
+                    >
+                        {loading ? "Generating..." : "Generate"}
+                    </Button>
+                </div>
+            </div>
+        </Menu>
+    );
+}

package/src/collection_editor/ui/collection_editor/AIModifiedPathsContext.tsx

@@ -0,0 +1,90 @@
+import React, { createContext, useCallback, useContext, useState, useMemo } 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 | any }) {
+    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]);
+
+    const contextValue = useMemo(() => ({
+        modifiedPaths,
+        generationCounter,
+        addModifiedPaths,
+        clearPath,
+        clearAllPaths,
+        isPathModified
+    }), [modifiedPaths, generationCounter, addModifiedPaths, clearPath, clearAllPaths, isPathModified]);
+
+    return (
+        <AIModifiedPathsContext.Provider value={contextValue}>
+            {children}
+        </AIModifiedPathsContext.Provider>
+    );
+}
+
+export function useAIModifiedPaths(): AIModifiedPathsContextType | null {
+    return useContext(AIModifiedPathsContext);
+}
+