@ai-stack/payloadcms 3.2.20-beta → 3.2.22-beta

package/dist/ui/Compose/hooks/menu/useMenu.js

@@ -19,7 +19,7 @@ const getActiveComponent = (ac)=>{
     }
 };
 export const useMenu = (menuEvents, options)=>{
-    const { type: fieldType, path: pathFromContext } = useFieldProps();
+    const { field: { type: fieldType } = {}, path: pathFromContext } = useFieldProps();
     const field = useField({
         path: pathFromContext ?? ''
     });

package/dist/ui/Compose/hooks/menu/useMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/useMenu.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport type { ActionMenuItems, UseMenuEvents, UseMenuOptions } from '../../../../types.js'\n\nimport { useFieldProps } from '../../../../providers/FieldProvider/useFieldProps.js'\nimport { Compose, Proofread, Rephrase } from './items.js'\nimport { menuItemsMap } from './itemsMap.js'\nimport styles from './menu.module.scss'\n\nconst getActiveComponent = (ac: ActionMenuItems) => {\n  switch (ac) {\n    case 'Compose':\n      return Compose\n    case 'Proofread':\n      return Proofread\n    case 'Rephrase':\n      return Rephrase\n    default:\n      return Rephrase\n  }\n}\n\nexport const useMenu = (menuEvents: UseMenuEvents, options: UseMenuOptions) => {\n  const { type: fieldType, path: pathFromContext } = useFieldProps()\n  const field = useField({ path: pathFromContext ?? '' })\n  const [activeComponent, setActiveComponent] = useState<ActionMenuItems>('Rephrase')\n\n  const { initialValue, value } = field\n\n  useEffect(() => {\n    if (!value) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    if (menuItemsMap.some((i) => i.excludedFor?.includes(fieldType ?? ''))) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    if (typeof value === 'string' && value !== initialValue) {\n      setActiveComponent('Proofread')\n    } else {\n      setActiveComponent('Rephrase')\n    }\n  }, [initialValue, value, fieldType])\n\n  const MemoizedActiveComponent = useMemo(() => {\n    return ({ isLoading, stop }: { isLoading: boolean; stop: () => void }) => {\n      const ActiveComponent = getActiveComponent(activeComponent)\n      const activeItem = menuItemsMap.find((i) => i.name === activeComponent)!\n      return (\n        <ActiveComponent\n          hideIcon\n          onClick={(data: unknown) => {\n            if (!isLoading) {\n              const trigger = menuEvents[`on${activeComponent}`]\n              if (typeof trigger === 'function') {\n                trigger(data)\n              } else {\n                console.error('No trigger found for', activeComponent)\n              }\n            } else {\n              stop()\n            }\n          }}\n          title={isLoading ? 'Click to stop' : activeItem.name}\n        >\n          {isLoading && activeItem.loadingText}\n        </ActiveComponent>\n      )\n    }\n  }, [activeComponent, menuEvents])\n\n  const filteredMenuItems = useMemo(\n    () =>\n      menuItemsMap.filter((i) => {\n        if (i.name === 'Settings' && !options.isConfigAllowed) {\n          return false\n        } // Disable settings if a user role is not permitted\n        return i.name !== activeComponent && !i.excludedFor?.includes(fieldType ?? '')\n      }),\n    [activeComponent, fieldType, options.isConfigAllowed],\n  )\n\n  const MemoizedMenu = useMemo(() => {\n    return ({ isLoading, onClose }: { isLoading: boolean; onClose: () => void }) => (\n      <div className={styles.menu}>\n        {filteredMenuItems.map((i) => {\n          const Action = i.component\n          return (\n            <Action\n              disabled={isLoading}\n              key={i.name}\n              onClick={(data: unknown) => {\n                if (i.name !== 'Settings') {\n                  setActiveComponent(i.name)\n                }\n\n                menuEvents[`on${i.name}`]?.(data)\n                onClose()\n              }}\n            >\n              {isLoading && i.loadingText}\n            </Action>\n          )\n        })}\n      </div>\n    )\n  }, [filteredMenuItems, menuEvents])\n\n  return {\n    ActiveComponent: MemoizedActiveComponent,\n    Menu: MemoizedMenu,\n  }\n}\n"],"names":["useField","React","useEffect","useMemo","useState","useFieldProps","Compose","Proofread","Rephrase","menuItemsMap","styles","getActiveComponent","ac","useMenu","menuEvents","options","type","fieldType","path","pathFromContext","field","activeComponent","setActiveComponent","initialValue","value","some","i","excludedFor","includes","MemoizedActiveComponent","isLoading","stop","ActiveComponent","activeItem","find","name","hideIcon","onClick","data","trigger","console","error","title","loadingText","filteredMenuItems","filter","isConfigAllowed","MemoizedMenu","onClose","div","className","menu","map","Action","component","disabled","Menu"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/useMenu.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport type { ActionMenuItems, UseMenuEvents, UseMenuOptions } from '../../../../types.js'\n\nimport { useFieldProps } from '../../../../providers/FieldProvider/useFieldProps.js'\nimport { Compose, Proofread, Rephrase } from './items.js'\nimport { menuItemsMap } from './itemsMap.js'\nimport styles from './menu.module.scss'\n\nconst getActiveComponent = (ac: ActionMenuItems) => {\n  switch (ac) {\n    case 'Compose':\n      return Compose\n    case 'Proofread':\n      return Proofread\n    case 'Rephrase':\n      return Rephrase\n    default:\n      return Rephrase\n  }\n}\n\nexport const useMenu = (menuEvents: UseMenuEvents, options: UseMenuOptions) => {\n  const { field:{ type: fieldType } = {}, path: pathFromContext } = useFieldProps()\n  const field = useField({ path: pathFromContext ?? '' })\n  const [activeComponent, setActiveComponent] = useState<ActionMenuItems>('Rephrase')\n\n  const { initialValue, value } = field\n\n  useEffect(() => {\n    if (!value) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    if (menuItemsMap.some((i) => i.excludedFor?.includes(fieldType ?? ''))) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    if (typeof value === 'string' && value !== initialValue) {\n      setActiveComponent('Proofread')\n    } else {\n      setActiveComponent('Rephrase')\n    }\n  }, [initialValue, value, fieldType])\n\n  const MemoizedActiveComponent = useMemo(() => {\n    return ({ isLoading, stop }: { isLoading: boolean; stop: () => void }) => {\n      const ActiveComponent = getActiveComponent(activeComponent)\n      const activeItem = menuItemsMap.find((i) => i.name === activeComponent)!\n      return (\n        <ActiveComponent\n          hideIcon\n          onClick={(data: unknown) => {\n            if (!isLoading) {\n              const trigger = menuEvents[`on${activeComponent}`]\n              if (typeof trigger === 'function') {\n                trigger(data)\n              } else {\n                console.error('No trigger found for', activeComponent)\n              }\n            } else {\n              stop()\n            }\n          }}\n          title={isLoading ? 'Click to stop' : activeItem.name}\n        >\n          {isLoading && activeItem.loadingText}\n        </ActiveComponent>\n      )\n    }\n  }, [activeComponent, menuEvents])\n\n  const filteredMenuItems = useMemo(\n    () =>\n      menuItemsMap.filter((i) => {\n        if (i.name === 'Settings' && !options.isConfigAllowed) {\n          return false\n        } // Disable settings if a user role is not permitted\n        return i.name !== activeComponent && !i.excludedFor?.includes(fieldType ?? '')\n      }),\n    [activeComponent, fieldType, options.isConfigAllowed],\n  )\n\n  const MemoizedMenu = useMemo(() => {\n    return ({ isLoading, onClose }: { isLoading: boolean; onClose: () => void }) => (\n      <div className={styles.menu}>\n        {filteredMenuItems.map((i) => {\n          const Action = i.component\n          return (\n            <Action\n              disabled={isLoading}\n              key={i.name}\n              onClick={(data: unknown) => {\n                if (i.name !== 'Settings') {\n                  setActiveComponent(i.name)\n                }\n\n                menuEvents[`on${i.name}`]?.(data)\n                onClose()\n              }}\n            >\n              {isLoading && i.loadingText}\n            </Action>\n          )\n        })}\n      </div>\n    )\n  }, [filteredMenuItems, menuEvents])\n\n  return {\n    ActiveComponent: MemoizedActiveComponent,\n    Menu: MemoizedMenu,\n  }\n}\n"],"names":["useField","React","useEffect","useMemo","useState","useFieldProps","Compose","Proofread","Rephrase","menuItemsMap","styles","getActiveComponent","ac","useMenu","menuEvents","options","field","type","fieldType","path","pathFromContext","activeComponent","setActiveComponent","initialValue","value","some","i","excludedFor","includes","MemoizedActiveComponent","isLoading","stop","ActiveComponent","activeItem","find","name","hideIcon","onClick","data","trigger","console","error","title","loadingText","filteredMenuItems","filter","isConfigAllowed","MemoizedMenu","onClose","div","className","menu","map","Action","component","disabled","Menu"],"mappings":"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"}

package/dist/ui/Compose/hooks/menu/useMenu.jsx

@@ -0,0 +1,89 @@
+'use client';
+import { useField } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useFieldProps } from '../../../../providers/FieldProvider/useFieldProps.js';
+import { Compose, Proofread, Rephrase } from './items.js';
+import { menuItemsMap } from './itemsMap.js';
+import styles from './menu.module.scss';
+const getActiveComponent = (ac) => {
+    switch (ac) {
+        case 'Compose':
+            return Compose;
+        case 'Proofread':
+            return Proofread;
+        case 'Rephrase':
+            return Rephrase;
+        default:
+            return Rephrase;
+    }
+};
+export const useMenu = (menuEvents, options) => {
+    const { field: { type: fieldType } = {}, path: pathFromContext } = useFieldProps();
+    const field = useField({ path: pathFromContext ?? '' });
+    const [activeComponent, setActiveComponent] = useState('Rephrase');
+    const { initialValue, value } = field;
+    useEffect(() => {
+        if (!value) {
+            setActiveComponent('Compose');
+            return;
+        }
+        if (menuItemsMap.some((i) => i.excludedFor?.includes(fieldType ?? ''))) {
+            setActiveComponent('Compose');
+            return;
+        }
+        if (typeof value === 'string' && value !== initialValue) {
+            setActiveComponent('Proofread');
+        }
+        else {
+            setActiveComponent('Rephrase');
+        }
+    }, [initialValue, value, fieldType]);
+    const MemoizedActiveComponent = useMemo(() => {
+        return ({ isLoading, stop }) => {
+            const ActiveComponent = getActiveComponent(activeComponent);
+            const activeItem = menuItemsMap.find((i) => i.name === activeComponent);
+            return (<ActiveComponent hideIcon onClick={(data) => {
+                    if (!isLoading) {
+                        const trigger = menuEvents[`on${activeComponent}`];
+                        if (typeof trigger === 'function') {
+                            trigger(data);
+                        }
+                        else {
+                            console.error('No trigger found for', activeComponent);
+                        }
+                    }
+                    else {
+                        stop();
+                    }
+                }} title={isLoading ? 'Click to stop' : activeItem.name}>
+          {isLoading && activeItem.loadingText}
+        </ActiveComponent>);
+        };
+    }, [activeComponent, menuEvents]);
+    const filteredMenuItems = useMemo(() => menuItemsMap.filter((i) => {
+        if (i.name === 'Settings' && !options.isConfigAllowed) {
+            return false;
+        } // Disable settings if a user role is not permitted
+        return i.name !== activeComponent && !i.excludedFor?.includes(fieldType ?? '');
+    }), [activeComponent, fieldType, options.isConfigAllowed]);
+    const MemoizedMenu = useMemo(() => {
+        return ({ isLoading, onClose }) => (<div className={styles.menu}>
+        {filteredMenuItems.map((i) => {
+                const Action = i.component;
+                return (<Action disabled={isLoading} key={i.name} onClick={(data) => {
+                        if (i.name !== 'Settings') {
+                            setActiveComponent(i.name);
+                        }
+                        menuEvents[`on${i.name}`]?.(data);
+                        onClose();
+                    }}>
+              {isLoading && i.loadingText}
+            </Action>);
+            })}
+      </div>);
+    }, [filteredMenuItems, menuEvents]);
+    return {
+        ActiveComponent: MemoizedActiveComponent,
+        Menu: MemoizedMenu,
+    };
+};

package/dist/ui/Compose/hooks/useActiveFieldTracking.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Initialize document-level listeners to track the active field container.
+ * When a container is active, it receives the 'ai-plugin-active' class.
+ */
+export declare const useActiveFieldTracking: () => void;

package/dist/ui/Compose/hooks/useActiveFieldTracking.js

@@ -0,0 +1,225 @@
+'use client';
+import { useEffect } from 'react';
+/**
+ * Allowed field type classes that should show the active state
+ */ const ALLOWED_FIELD_TYPES = [
+    'upload',
+    'text',
+    'textarea',
+    'rich-text-lexical'
+];
+let currentContainer = null;
+let rafId = null // Track RAF to cancel if needed
+;
+/**
+ * Safely escape CSS selector values
+ */ const cssEscape = (value)=>{
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+        return CSS.escape(value);
+    }
+    return value.replace(/([ #;?%&,.+*~':"!^$[\]()=>|/@])/g, '\\$1');
+};
+/**
+ * Find container from React Select dropdown elements
+ */ const findContainerFromReactSelect = (target)=>{
+    const listbox = target.closest('[role="listbox"]');
+    if (!listbox?.id) {
+        return null;
+    }
+    const id = cssEscape(listbox.id);
+    const selector = `[aria-controls="${id}"], [aria-owns="${id}"]`;
+    const control = document.querySelector(selector);
+    return control?.closest('.field-type') ?? null;
+};
+/**
+ * Check if a container has one of the allowed field type classes
+ */ const isAllowedFieldType = (container)=>{
+    return ALLOWED_FIELD_TYPES.some((type)=>container.classList.contains(type) || container.classList.contains(`field-type-${type}`));
+};
+/**
+ * Resolve the .field-type container for a given event target
+ * Only returns containers that match allowed field types
+ */ const resolveContainerFromTarget = (target)=>{
+    if (!(target instanceof HTMLElement)) {
+        return null;
+    }
+    // Check for direct parent first
+    let container = target.closest('.field-type');
+    // If not found, fall back to React Select logic
+    if (!container) {
+        container = findContainerFromReactSelect(target);
+    }
+    // Only return if it's an allowed field type
+    if (container && isAllowedFieldType(container)) {
+        return container;
+    }
+    return null;
+};
+/**
+ * Update the active container and toggle CSS class
+ * - Avoids acting on disconnected nodes
+ * - Avoids redundant class work
+ */ const setActiveContainer = (next)=>{
+    // Normalize both references against disconnected nodes
+    if (currentContainer && !currentContainer.isConnected) {
+        currentContainer = null;
+    }
+    if (next && !next.isConnected) {
+        next = null;
+    }
+    if (currentContainer === next) {
+        return;
+    }
+    currentContainer?.classList.remove('ai-plugin-active');
+    if (next) {
+        next.classList.add('ai-plugin-active');
+    }
+    currentContainer = next;
+};
+const clearActiveContainer = ()=>{
+    if (currentContainer) {
+        currentContainer.classList.remove('ai-plugin-active');
+        currentContainer = null;
+    }
+    // Cancel any pending RAF
+    if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+    }
+};
+const isInteractiveElement = (element)=>{
+    const tagName = element.tagName.toLowerCase();
+    const interactiveTags = [
+        'input',
+        'textarea',
+        'select',
+        'button'
+    ];
+    if (interactiveTags.includes(tagName)) {
+        return true;
+    }
+    // Check for contenteditable
+    if (element.isContentEditable) {
+        return true;
+    }
+    // Check for elements with role="textbox" or role="combobox" (React Select)
+    const role = element.getAttribute('role');
+    if (role && [
+        'combobox',
+        'listbox',
+        'searchbox',
+        'textbox'
+    ].includes(role)) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Handle focus events - only activate if focus is on an interactive element within .field-type
+ */ const onFocusIn = (e)=>{
+    const target = e.target;
+    if (!(target instanceof HTMLElement)) {
+        return;
+    }
+    // Early exit if we're already inside the current container
+    if (currentContainer?.isConnected && currentContainer.contains(target)) {
+        return;
+    }
+    // Only activate if the focused element is actually interactive
+    if (!isInteractiveElement(target)) {
+        return;
+    }
+    const container = resolveContainerFromTarget(target);
+    setActiveContainer(container);
+};
+/**
+ * Handle pointer/mouse events - only switch when clicking a different .field-type
+ */ const onPointerDown = (e)=>{
+    const target = e.target;
+    if (!(target instanceof HTMLElement)) {
+        return;
+    }
+    // Early exit if clicking within current container
+    if (currentContainer?.isConnected && currentContainer.contains(target)) {
+        return;
+    }
+    const container = resolveContainerFromTarget(target);
+    setActiveContainer(container);
+};
+/**
+ * Handle keyboard navigation (Tab key)
+ */ const onKeyDown = (e)=>{
+    if (e.key !== 'Tab') {
+        return;
+    }
+    // Cancel any pending RAF to prevent queuing
+    if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+    }
+    // Defer until after focus has shifted
+    rafId = requestAnimationFrame(()=>{
+        rafId = null;
+        const container = resolveContainerFromTarget(document.activeElement);
+        setActiveContainer(container);
+    });
+};
+/**
+ * Handle visibility changes to properly cleanup when page is hidden
+ */ const onVisibilityChange = ()=>{
+    if (typeof document !== 'undefined' && document.hidden) {
+        // Clear active state and cancel pending operations
+        clearActiveContainer();
+    }
+};
+/**
+ * Initialize document-level listeners to track the active field container.
+ * When a container is active, it receives the 'ai-plugin-active' class.
+ */ export const useActiveFieldTracking = ()=>{
+    useEffect(()=>{
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const pluginWindow = window;
+        // Track number of mounted users of the hook
+        pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 0) + 1;
+        // Initialize listeners only once
+        if (!pluginWindow.__aiComposeTracking) {
+            const controller = new AbortController();
+            pluginWindow.__aiComposeTrackingController = controller;
+            // Use capture for early handling
+            document.addEventListener('focusin', onFocusIn, {
+                capture: true,
+                signal: controller.signal
+            });
+            document.addEventListener('pointerdown', onPointerDown, {
+                capture: true,
+                passive: true,
+                signal: controller.signal
+            });
+            document.addEventListener('keydown', onKeyDown, {
+                capture: true,
+                signal: controller.signal
+            });
+            document.addEventListener('visibilitychange', onVisibilityChange, {
+                signal: controller.signal
+            });
+            pluginWindow.__aiComposeTracking = true;
+        }
+        return ()=>{
+            // Decrement and cleanup when the last user unmounts
+            pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 1) - 1;
+            if ((pluginWindow.__aiComposeTrackingCount ?? 0) <= 0) {
+                // Atomically remove all listeners
+                pluginWindow.__aiComposeTrackingController?.abort();
+                pluginWindow.__aiComposeTrackingController = undefined;
+                // Clear active state and cancel pending operations
+                clearActiveContainer();
+                // Reset all state
+                pluginWindow.__aiComposeTracking = false;
+                pluginWindow.__aiComposeTrackingCount = 0;
+            }
+        };
+    }, []);
+};
+
+//# sourceMappingURL=useActiveFieldTracking.js.map

package/dist/ui/Compose/hooks/useActiveFieldTracking.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/Compose/hooks/useActiveFieldTracking.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\n/**\n * Allowed field type classes that should show the active state\n */\nconst ALLOWED_FIELD_TYPES = ['upload', 'text', 'textarea', 'rich-text-lexical']\n\nlet currentContainer: HTMLElement | null = null\nlet rafId: null | number = null // Track RAF to cancel if needed\n\n/**\n * Safely escape CSS selector values\n */\nconst cssEscape = (value: string): string => {\n  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {\n    return CSS.escape(value)\n  }\n  return value.replace(/([ #;?%&,.+*~':\"!^$[\\]()=>|/@])/g, '\\\\$1')\n}\n\n/**\n * Find container from React Select dropdown elements\n */\nconst findContainerFromReactSelect = (target: HTMLElement): HTMLElement | null => {\n  const listbox = target.closest<HTMLElement>('[role=\"listbox\"]')\n  if (!listbox?.id) {\n    return null\n  }\n\n  const id = cssEscape(listbox.id)\n  const selector = `[aria-controls=\"${id}\"], [aria-owns=\"${id}\"]`\n  const control = document.querySelector<HTMLElement>(selector)\n\n  return control?.closest<HTMLElement>('.field-type') ?? null\n}\n\n/**\n * Check if a container has one of the allowed field type classes\n */\nconst isAllowedFieldType = (container: HTMLElement): boolean => {\n  return ALLOWED_FIELD_TYPES.some(\n    (type) =>\n      container.classList.contains(type) || container.classList.contains(`field-type-${type}`),\n  )\n}\n\n/**\n * Resolve the .field-type container for a given event target\n * Only returns containers that match allowed field types\n */\nconst resolveContainerFromTarget = (target: EventTarget | null): HTMLElement | null => {\n  if (!(target instanceof HTMLElement)) {\n    return null\n  }\n\n  // Check for direct parent first\n  let container = target.closest<HTMLElement>('.field-type')\n\n  // If not found, fall back to React Select logic\n  if (!container) {\n    container = findContainerFromReactSelect(target)\n  }\n\n  // Only return if it's an allowed field type\n  if (container && isAllowedFieldType(container)) {\n    return container\n  }\n\n  return null\n}\n\n/**\n * Update the active container and toggle CSS class\n * - Avoids acting on disconnected nodes\n * - Avoids redundant class work\n */\nconst setActiveContainer = (next: HTMLElement | null): void => {\n  // Normalize both references against disconnected nodes\n  if (currentContainer && !currentContainer.isConnected) {\n    currentContainer = null\n  }\n  if (next && !next.isConnected) {\n    next = null\n  }\n\n  if (currentContainer === next) {\n    return\n  }\n\n  currentContainer?.classList.remove('ai-plugin-active')\n  if (next) {\n    next.classList.add('ai-plugin-active')\n  }\n  currentContainer = next\n}\n\nconst clearActiveContainer = (): void => {\n  if (currentContainer) {\n    currentContainer.classList.remove('ai-plugin-active')\n    currentContainer = null\n  }\n\n  // Cancel any pending RAF\n  if (rafId !== null) {\n    cancelAnimationFrame(rafId)\n    rafId = null\n  }\n}\n\nconst isInteractiveElement = (element: HTMLElement): boolean => {\n  const tagName = element.tagName.toLowerCase()\n  const interactiveTags = ['input', 'textarea', 'select', 'button']\n\n  if (interactiveTags.includes(tagName)) {\n    return true\n  }\n\n  // Check for contenteditable\n  if (element.isContentEditable) {\n    return true\n  }\n\n  // Check for elements with role=\"textbox\" or role=\"combobox\" (React Select)\n  const role = element.getAttribute('role')\n  if (role && ['combobox', 'listbox', 'searchbox', 'textbox'].includes(role)) {\n    return true\n  }\n\n  return false\n}\n\n/**\n * Handle focus events - only activate if focus is on an interactive element within .field-type\n */\nconst onFocusIn = (e: FocusEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  // Early exit if we're already inside the current container\n  if (currentContainer?.isConnected && currentContainer.contains(target)) {\n    return\n  }\n\n  // Only activate if the focused element is actually interactive\n  if (!isInteractiveElement(target)) {\n    return\n  }\n\n  const container = resolveContainerFromTarget(target)\n  setActiveContainer(container)\n}\n\n/**\n * Handle pointer/mouse events - only switch when clicking a different .field-type\n */\nconst onPointerDown = (e: PointerEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  // Early exit if clicking within current container\n  if (currentContainer?.isConnected && currentContainer.contains(target)) {\n    return\n  }\n\n  const container = resolveContainerFromTarget(target)\n  setActiveContainer(container)\n}\n\n/**\n * Handle keyboard navigation (Tab key)\n */\nconst onKeyDown = (e: KeyboardEvent): void => {\n  if (e.key !== 'Tab') {\n    return\n  }\n\n  // Cancel any pending RAF to prevent queuing\n  if (rafId !== null) {\n    cancelAnimationFrame(rafId)\n  }\n\n  // Defer until after focus has shifted\n  rafId = requestAnimationFrame(() => {\n    rafId = null\n    const container = resolveContainerFromTarget(document.activeElement)\n    setActiveContainer(container)\n  })\n}\n\n/**\n * Handle visibility changes to properly cleanup when page is hidden\n */\nconst onVisibilityChange = (): void => {\n  if (typeof document !== 'undefined' && document.hidden) {\n    // Clear active state and cancel pending operations\n    clearActiveContainer()\n  }\n}\n\n/**\n * Initialize document-level listeners to track the active field container.\n * When a container is active, it receives the 'ai-plugin-active' class.\n */\nexport const useActiveFieldTracking = (): void => {\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return\n    }\n\n    const pluginWindow = window as {\n      __aiComposeTracking?: boolean\n      __aiComposeTrackingController?: AbortController\n      __aiComposeTrackingCount?: number\n    } & Window\n\n    // Track number of mounted users of the hook\n    pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 0) + 1\n\n    // Initialize listeners only once\n    if (!pluginWindow.__aiComposeTracking) {\n      const controller = new AbortController()\n      pluginWindow.__aiComposeTrackingController = controller\n\n      // Use capture for early handling\n      document.addEventListener('focusin', onFocusIn, {\n        capture: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('pointerdown', onPointerDown, {\n        capture: true,\n        passive: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('keydown', onKeyDown, {\n        capture: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('visibilitychange', onVisibilityChange, {\n        signal: controller.signal,\n      })\n\n      pluginWindow.__aiComposeTracking = true\n    }\n\n    return () => {\n      // Decrement and cleanup when the last user unmounts\n      pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 1) - 1\n\n      if ((pluginWindow.__aiComposeTrackingCount ?? 0) <= 0) {\n        // Atomically remove all listeners\n        pluginWindow.__aiComposeTrackingController?.abort()\n        pluginWindow.__aiComposeTrackingController = undefined\n\n        // Clear active state and cancel pending operations\n        clearActiveContainer()\n\n        // Reset all state\n        pluginWindow.__aiComposeTracking = false\n        pluginWindow.__aiComposeTrackingCount = 0\n      }\n    }\n  }, [])\n}\n"],"names":["useEffect","ALLOWED_FIELD_TYPES","currentContainer","rafId","cssEscape","value","CSS","escape","replace","findContainerFromReactSelect","target","listbox","closest","id","selector","control","document","querySelector","isAllowedFieldType","container","some","type","classList","contains","resolveContainerFromTarget","HTMLElement","setActiveContainer","next","isConnected","remove","add","clearActiveContainer","cancelAnimationFrame","isInteractiveElement","element","tagName","toLowerCase","interactiveTags","includes","isContentEditable","role","getAttribute","onFocusIn","e","onPointerDown","onKeyDown","key","requestAnimationFrame","activeElement","onVisibilityChange","hidden","useActiveFieldTracking","window","pluginWindow","__aiComposeTrackingCount","__aiComposeTracking","controller","AbortController","__aiComposeTrackingController","addEventListener","capture","signal","passive","abort","undefined"],"mappings":"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"}

package/dist/ui/Compose/hooks/useGenerate.js

@@ -1,4 +1,4 @@
-import { useCompletion, experimental_useObject as useObject } from '@ai-sdk/react';
+import { experimental_useObject as useObject } from '@ai-sdk/react';
 import { useEditorConfigContext } from '@payloadcms/richtext-lexical/client';
 import { toast, useConfig, useDocumentInfo, useField, useForm, useLocale } from '@payloadcms/ui';
 import { jsonSchema } from 'ai';
@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { PLUGIN_API_ENDPOINT_GENERATE, PLUGIN_API_ENDPOINT_GENERATE_UPLOAD, PLUGIN_INSTRUCTIONS_TABLE, PLUGIN_NAME } from '../../../defaults.js';
 import { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js';
 import { editorSchemaValidator } from '../../../utilities/editorSchemaValidator.js';
+import { fieldToJsonSchema } from '../../../utilities/fieldToJsonSchema.js';
 import { setSafeLexicalState } from '../../../utilities/setSafeLexicalState.js';
 import { useHistory } from './useHistory.js';
 export const useGenerate = ({ instructionId })=>{
@@ -17,7 +18,7 @@ export const useGenerate = ({ instructionId })=>{
     }, [
         instructionId
     ]);
-    const { type, path: pathFromContext } = useFieldProps();
+    const { field, path: pathFromContext } = useFieldProps();
     const editorConfigContext = useEditorConfigContext();
     const { editor } = editorConfigContext;
     const { config } = useConfig();
@@ -56,6 +57,24 @@ export const useGenerate = ({ instructionId })=>{
         }), [
         memoizedValidator
     ]);
+    // Active JSON schema for useObject based on field type
+    const activeSchema = useMemo(()=>{
+        const f = field;
+        const fieldType = f?.type;
+        if (fieldType === 'richText') {
+            return memoizedSchema;
+        }
+        if (f && f.name && fieldType) {
+            const schemaJson = fieldToJsonSchema(f);
+            if (schemaJson && Object.keys(schemaJson).length > 0) {
+                return jsonSchema(schemaJson);
+            }
+        }
+        return undefined;
+    }, [
+        field,
+        memoizedSchema
+    ]);
     const { isLoading: loadingObject, object, stop: objectStop, submit } = useObject({
         api: `/api${PLUGIN_API_ENDPOINT_GENERATE}`,
         onError: (error)=>{
@@ -63,50 +82,35 @@ export const useGenerate = ({ instructionId })=>{
             console.error('Error generating object:', error);
         },
         onFinish: (result)=>{
-            if (result.object) {
-                setHistory(result.object);
-                setValue(result.object);
+            if (result.object && field) {
+                if (field.type === 'richText') {
+                    setHistory(result.object);
+                    setValue(result.object);
+                } else if ('name' in field) {
+                    setHistory(result.object[field.name]);
+                    setValue(result.object[field.name]);
+                }
             } else {
-                console.log('onFinish: result ', result);
+                console.log('onFinish: result, field ', result, field);
             }
         },
-        schema: memoizedSchema
+        schema: activeSchema
     });
     useEffect(()=>{
         if (!object) {
             return;
         }
         requestAnimationFrame(()=>{
-            // TODO: Temporary disabled pre validation, sometimes it fails to validate
-            // const validateObject = await memoizedSchema?.validate?.(object)
-            // if (validateObject?.success) {
-            setSafeLexicalState(object, editor);
-        // }
+            if (field?.type === 'richText') {
+                setSafeLexicalState(object, editor);
+            } else if (field && 'name' in field && object[field.name]) {
+                setValue(object[field.name]);
+            }
         });
     }, [
         object,
-        editor
-    ]);
-    const { complete, completion, isLoading: loadingCompletion, stop: completionStop } = useCompletion({
-        api: `${serverURL}${api}${PLUGIN_API_ENDPOINT_GENERATE}`,
-        onError: (error)=>{
-            toast.error(`Failed to generate: ${error.message}`);
-            console.error('Error generating text:', error);
-        },
-        onFinish: (prompt, result)=>{
-            setHistory(result);
-        },
-        streamProtocol: 'data'
-    });
-    useEffect(()=>{
-        if (!completion) {
-            return;
-        }
-        requestAnimationFrame(()=>{
-            setValue(completion);
-        });
-    }, [
-        completion
+        editor,
+        field
     ]);
     const streamObject = useCallback(({ action = 'Compose', params })=>{
         const doc = getData();
@@ -130,31 +134,6 @@ export const useGenerate = ({ instructionId })=>{
         instructionIdRef,
         documentId
     ]);
-    const streamText = useCallback(async ({ action = 'Compose', params })=>{
-        const doc = getData();
-        const currentInstructionId = instructionIdRef.current;
-        const options = {
-            action,
-            actionParams: params,
-            instructionId: currentInstructionId
-        };
-        await complete('', {
-            body: {
-                doc: {
-                    ...doc,
-                    id: documentId
-                },
-                locale: localFromContext?.code,
-                options
-            }
-        });
-    }, [
-        getData,
-        localFromContext?.code,
-        instructionIdRef,
-        complete,
-        documentId
-    ]);
     const generateUpload = useCallback(async ()=>{
         const doc = getData();
         const currentInstructionId = instructionIdRef.current;
@@ -201,39 +180,27 @@ export const useGenerate = ({ instructionId })=>{
         collectionSlug
     ]);
     const generate = useCallback(async (options)=>{
-        if (type === 'richText') {
-            return streamObject(options ?? {
-                action: 'Compose'
-            });
-        }
-        if ([
-            'text',
-            'textarea'
-        ].includes(type ?? '') && type) {
-            return streamText(options ?? {
-                action: 'Compose'
-            });
-        }
-        if (type === 'upload') {
+        if (field?.type === 'upload') {
             return generateUpload();
         }
+        // All supported types use structured object generation when schema is provided server-side
+        return streamObject(options ?? {
+            action: 'Compose'
+        });
     }, [
         generateUpload,
         streamObject,
-        streamText,
-        type
+        field
     ]);
     const stop = useCallback(()=>{
         console.log('Stopping...');
         objectStop();
-        completionStop();
     }, [
-        objectStop,
-        completionStop
+        objectStop
     ]);
     return {
         generate,
-        isLoading: loadingCompletion || loadingObject,
+        isLoading: loadingObject,
         stop
     };
 };