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

package/dist/ui/Compose/Compose.js

@@ -2,92 +2,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEditorConfigContext } from '@payloadcms/richtext-lexical/client';
 import { Popup, useDocumentDrawer, useField } from '@payloadcms/ui';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js';
 import { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js';
 import { PluginIcon } from '../Icons/Icons.js';
 import styles from './compose.module.css';
 import { useMenu } from './hooks/menu/useMenu.js';
+import { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js';
 import { useGenerate } from './hooks/useGenerate.js';
 import { UndoRedoActions } from './UndoRedoActions.js';
-function findParentWithClass(element, className) {
-    // Base case: if the element is null, or we've reached the top of the DOM
-    if (!element || element === document.body) {
-        return null;
-    }
-    // Check if the current element has the class we're looking for
-    if (element.classList.contains(className)) {
-        return element;
-    }
-    // Recursively call the function on the parent element
-    return findParentWithClass(element.parentElement, className);
-}
 export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
     const [DocumentDrawer, _, { closeDrawer, openDrawer }] = useDocumentDrawer({
         id: instructionId,
         collectionSlug: PLUGIN_INSTRUCTIONS_TABLE
     });
-    const fieldType = descriptionProps?.field?.type;
     const pathFromContext = descriptionProps?.path;
-    const schemaPath = descriptionProps?.schemaPath;
-    const { editor: lexicalEditor, editorContainerRef } = useEditorConfigContext();
-    // The below snippet is used to show/hide the action menu on AI-enabled fields
-    const [input, setInput] = useState(null);
-    const actionsRef = useRef(null);
-    // Set input element for current field
-    useEffect(()=>{
-        if (!actionsRef.current) {
-            return;
-        }
-        if (!pathFromContext) {
-            return;
-        }
-        const fieldId = `field-${pathFromContext.replace(/\./g, '__')}`;
-        const inputElement = document.getElementById(fieldId);
-        if (!inputElement && fieldType === 'richText') {
-            setInput(editorContainerRef.current);
-        } else {
-            actionsRef.current?.setAttribute('for', fieldId);
-            setInput(inputElement);
-        }
-    }, [
-        pathFromContext,
-        schemaPath,
-        actionsRef,
-        editorContainerRef,
-        fieldType
-    ]);
-    // Show or hide actions menu on field
-    useEffect(()=>{
-        if (!input || !actionsRef.current) {
-            return;
-        }
-        actionsRef.current?.classList.add(styles.actions_hidden);
-        // Create the handler function
-        const clickHandler = (event)=>{
-            document.querySelectorAll('.ai-plugin-active')?.forEach((element)=>{
-                const actionElement = element.querySelector(`.${styles.actions}`);
-                if (actionElement) {
-                    actionElement.classList.add(styles.actions_hidden);
-                    element.classList.remove('ai-plugin-active');
-                }
-            });
-            actionsRef.current?.classList.remove(styles.actions_hidden);
-            const parentWithClass = findParentWithClass(event.target, 'field-type');
-            if (parentWithClass) {
-                parentWithClass.classList.add('ai-plugin-active');
-            }
-        };
-        // Add the event listener
-        input?.addEventListener('click', clickHandler);
-        // Clean up the event listener when the component unmounts or input changes
-        return ()=>{
-            input?.removeEventListener('click', clickHandler);
-        };
-    }, [
-        input,
-        actionsRef
-    ]);
+    const { editor: lexicalEditor } = useEditorConfigContext();
+    // Initialize global active-field tracking
+    useActiveFieldTracking();
     const [isProcessing, setIsProcessing] = useState(false);
     const { generate, isLoading, stop } = useGenerate({
         instructionId
@@ -99,7 +31,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Compose'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -109,7 +41,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Expand'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -119,7 +51,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Proofread'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -129,7 +61,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Rephrase'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -140,7 +72,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Simplify'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -150,7 +82,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Summarize'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -161,7 +93,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
                 action: 'Translate',
                 params: data
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -204,7 +136,6 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
     return /*#__PURE__*/ _jsxs("label", {
         className: `payloadai-compose__actions ${styles.actions}`,
         onClick: (e)=>e.preventDefault(),
-        ref: actionsRef,
         role: "presentation",
         children: [
             /*#__PURE__*/ _jsx(DocumentDrawer, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/Compose/Compose.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientField } from 'payload'\nimport type { FC } from 'react'\n\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { FieldDescription, Popup, useDocumentDrawer, useField } from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js'\nimport { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js'\nimport { PluginIcon } from '../Icons/Icons.js'\nimport styles from './compose.module.css'\nimport { useMenu } from './hooks/menu/useMenu.js'\nimport { useGenerate } from './hooks/useGenerate.js'\nimport { UndoRedoActions } from './UndoRedoActions.js'\n\nfunction findParentWithClass(element: HTMLElement | null, className: string): HTMLElement | null {\n  // Base case: if the element is null, or we've reached the top of the DOM\n  if (!element || element === document.body) {\n    return null\n  }\n\n  // Check if the current element has the class we're looking for\n  if (element.classList.contains(className)) {\n    return element\n  }\n\n  // Recursively call the function on the parent element\n  return findParentWithClass(element.parentElement, className)\n}\n\ntype ComposeProps = {\n  descriptionProps?: {\n    field: ClientField\n    path: string\n    schemaPath: string\n  }\n  instructionId: string\n  isConfigAllowed: boolean\n}\n\nexport const Compose: FC<ComposeProps> = ({ descriptionProps, instructionId, isConfigAllowed }) => {\n  const [DocumentDrawer, _, { closeDrawer, openDrawer }] = useDocumentDrawer({\n    id: instructionId,\n    collectionSlug: PLUGIN_INSTRUCTIONS_TABLE,\n  })\n\n  const fieldType = descriptionProps?.field?.type\n  const pathFromContext = descriptionProps?.path\n  const schemaPath = descriptionProps?.schemaPath\n  const { editor: lexicalEditor, editorContainerRef } = useEditorConfigContext()\n\n  // The below snippet is used to show/hide the action menu on AI-enabled fields\n  const [input, setInput] = useState<HTMLElement | null>(null)\n  const actionsRef = useRef<HTMLLabelElement | null>(null)\n\n  // Set input element for current field\n  useEffect(() => {\n    if (!actionsRef.current) {\n      return\n    }\n\n    if (!pathFromContext) {\n      return\n    }\n\n    const fieldId = `field-${pathFromContext.replace(/\\./g, '__')}`\n    const inputElement = document.getElementById(fieldId)\n\n    if (!inputElement && fieldType === 'richText') {\n      setInput(editorContainerRef.current as HTMLElement | null)\n    } else {\n      actionsRef.current?.setAttribute('for', fieldId)\n      setInput(inputElement)\n    }\n  }, [pathFromContext, schemaPath, actionsRef, editorContainerRef, fieldType])\n\n  // Show or hide actions menu on field\n  useEffect(() => {\n    if (!input || !actionsRef.current) {\n      return\n    }\n\n    actionsRef.current?.classList.add(styles.actions_hidden)\n\n    // Create the handler function\n    const clickHandler = (event: MouseEvent) => {\n      document.querySelectorAll('.ai-plugin-active')?.forEach((element) => {\n        const actionElement = (element as HTMLElement).querySelector(`.${styles.actions}`)\n        if (actionElement) {\n          actionElement.classList.add(styles.actions_hidden)\n          element.classList.remove('ai-plugin-active')\n        }\n      })\n\n      actionsRef.current?.classList.remove(styles.actions_hidden)\n      const parentWithClass = findParentWithClass(event.target as HTMLElement, 'field-type')\n      if (parentWithClass) {\n        parentWithClass.classList.add('ai-plugin-active')\n      }\n    }\n\n    // Add the event listener\n    input?.addEventListener('click', clickHandler)\n\n    // Clean up the event listener when the component unmounts or input changes\n    return () => {\n      input?.removeEventListener('click', clickHandler)\n    }\n  }, [input, actionsRef])\n\n  const [isProcessing, setIsProcessing] = useState<boolean>(false)\n  const { generate, isLoading, stop } = useGenerate({ instructionId })\n\n  const { ActiveComponent, Menu } = useMenu(\n    {\n      onCompose: () => {\n        console.log('Composing...')\n        setIsProcessing(true)\n        generate({\n          action: 'Compose',\n        }).catch((reason)=>{\n          console.error(\"Compose : \",reason)\n        }).finally(() => {\n          setIsProcessing(false)\n        })\n      },\n      onExpand:  () => {\n        console.log('Expanding...')\n         generate({\n          action: 'Expand',\n        }).catch((reason)=>{\n          console.error(\"Compose : \",reason)\n        }).finally(() => {\n          setIsProcessing(false)\n        })\n      },\n      onProofread:  () => {\n        console.log('Proofreading...')\n         generate({\n          action: 'Proofread',\n        }).catch((reason)=>{\n          console.error(\"Compose : \",reason)\n        }).finally(() => {\n          setIsProcessing(false)\n        })\n      },\n      onRephrase:  () => {\n        console.log('Rephrasing...')\n         generate({\n          action: 'Rephrase',\n        }).catch((reason)=>{\n          console.error(\"Compose : \",reason)\n        }).finally(() => {\n          setIsProcessing(false)\n        })\n      },\n      onSettings: isConfigAllowed ? openDrawer : undefined,\n      onSimplify:  () => {\n        console.log('Simplifying...')\n         generate({\n          action: 'Simplify',\n        }).catch((reason)=>{\n          console.error(\"Compose : \",reason)\n        }).finally(() => {\n          setIsProcessing(false)\n        })\n      },\n      onSummarize:  () => {\n        console.log('Summarizing...')\n         generate({\n          action: 'Summarize',\n        }).catch((reason)=>{\n          console.error(\"Compose : \",reason)\n        }).finally(() => {\n          setIsProcessing(false)\n        })\n      },\n      onTranslate:  (data) => {\n        console.log('Translating...')\n         generate({\n          action: 'Translate',\n          params: data,\n        }).catch((reason)=>{\n          console.error(\"Compose : \",reason)\n        }).finally(() => {\n          setIsProcessing(false)\n        })\n      },\n    },\n    {\n      isConfigAllowed,\n    },\n  )\n\n  const { setValue } = useField<string>({\n    path: pathFromContext,\n  })\n\n  const setIfValueIsLexicalState = useCallback((val: any) => {\n    if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {\n      setSafeLexicalState(JSON.stringify(val), lexicalEditor)\n    }\n\n    // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo\n  }, [])\n\n  const popupRender = useCallback(\n    ({ close }: { close: () => void }) => {\n      return <Menu isLoading={isProcessing || isLoading} onClose={close} />\n    },\n    [isProcessing, isLoading, Menu],\n  )\n\n  const memoizedPopup = useMemo(() => {\n    return (\n      <Popup\n        button={<PluginIcon isLoading={isProcessing || isLoading} />}\n        render={popupRender}\n        verticalAlign=\"bottom\"\n      />\n    )\n  }, [popupRender, isProcessing, isLoading])\n\n  return (\n    <label\n      className={`payloadai-compose__actions ${styles.actions}`}\n      onClick={(e) => e.preventDefault()}\n      ref={actionsRef}\n      role=\"presentation\"\n    >\n      <DocumentDrawer\n        onSave={() => {\n          closeDrawer()\n        }}\n      />\n      {memoizedPopup}\n      <ActiveComponent isLoading={isProcessing || isLoading} stop={stop} />\n      <UndoRedoActions\n        onChange={(val) => {\n          setValue(val)\n          setIfValueIsLexicalState(val)\n        }}\n      />\n    </label>\n  )\n}\n"],"names":["useEditorConfigContext","Popup","useDocumentDrawer","useField","React","useCallback","useEffect","useMemo","useRef","useState","PLUGIN_INSTRUCTIONS_TABLE","setSafeLexicalState","PluginIcon","styles","useMenu","useGenerate","UndoRedoActions","findParentWithClass","element","className","document","body","classList","contains","parentElement","Compose","descriptionProps","instructionId","isConfigAllowed","DocumentDrawer","_","closeDrawer","openDrawer","id","collectionSlug","fieldType","field","type","pathFromContext","path","schemaPath","editor","lexicalEditor","editorContainerRef","input","setInput","actionsRef","current","fieldId","replace","inputElement","getElementById","setAttribute","add","actions_hidden","clickHandler","event","querySelectorAll","forEach","actionElement","querySelector","actions","remove","parentWithClass","target","addEventListener","removeEventListener","isProcessing","setIsProcessing","generate","isLoading","stop","ActiveComponent","Menu","onCompose","console","log","action","catch","reason","error","finally","onExpand","onProofread","onRephrase","onSettings","undefined","onSimplify","onSummarize","onTranslate","data","params","setValue","setIfValueIsLexicalState","val","JSON","stringify","popupRender","close","onClose","memoizedPopup","button","render","verticalAlign","label","onClick","e","preventDefault","ref","role","onSave","onChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/ui/Compose/Compose.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientField } from 'payload'\nimport type { FC } from 'react'\n\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { Popup, useDocumentDrawer, useField } from '@payloadcms/ui'\nimport React, { useCallback, useMemo, useState } from 'react'\n\nimport { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js'\nimport { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js'\nimport { PluginIcon } from '../Icons/Icons.js'\nimport styles from './compose.module.css'\nimport { useMenu } from './hooks/menu/useMenu.js'\nimport { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js'\nimport { useGenerate } from './hooks/useGenerate.js'\nimport { UndoRedoActions } from './UndoRedoActions.js'\n\ntype ComposeProps = {\n  descriptionProps?: {\n    field: ClientField\n    path: string\n    schemaPath: string\n  }\n  instructionId: string\n  isConfigAllowed: boolean\n}\n\nexport const Compose: FC<ComposeProps> = ({ descriptionProps, instructionId, isConfigAllowed }) => {\n  const [DocumentDrawer, _, { closeDrawer, openDrawer }] = useDocumentDrawer({\n    id: instructionId,\n    collectionSlug: PLUGIN_INSTRUCTIONS_TABLE,\n  })\n\n  const pathFromContext = descriptionProps?.path\n  const { editor: lexicalEditor } = useEditorConfigContext()\n\n  // Initialize global active-field tracking\n  useActiveFieldTracking()\n\n  const [isProcessing, setIsProcessing] = useState<boolean>(false)\n  const { generate, isLoading, stop } = useGenerate({ instructionId })\n\n  const { ActiveComponent, Menu } = useMenu(\n    {\n      onCompose: () => {\n        console.log('Composing...')\n        setIsProcessing(true)\n        generate({\n          action: 'Compose',\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onExpand: () => {\n        console.log('Expanding...')\n        generate({\n          action: 'Expand',\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onProofread: () => {\n        console.log('Proofreading...')\n        generate({\n          action: 'Proofread',\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onRephrase: () => {\n        console.log('Rephrasing...')\n        generate({\n          action: 'Rephrase',\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onSettings: isConfigAllowed ? openDrawer : undefined,\n      onSimplify: () => {\n        console.log('Simplifying...')\n        generate({\n          action: 'Simplify',\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onSummarize: () => {\n        console.log('Summarizing...')\n        generate({\n          action: 'Summarize',\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onTranslate: (data) => {\n        console.log('Translating...')\n        generate({\n          action: 'Translate',\n          params: data,\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n    },\n    {\n      isConfigAllowed,\n    },\n  )\n\n  const { setValue } = useField<string>({\n    path: pathFromContext,\n  })\n\n  const setIfValueIsLexicalState = useCallback((val: any) => {\n    if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {\n      setSafeLexicalState(JSON.stringify(val), lexicalEditor)\n    }\n\n    // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo\n  }, [])\n\n  const popupRender = useCallback(\n    ({ close }: { close: () => void }) => {\n      return <Menu isLoading={isProcessing || isLoading} onClose={close} />\n    },\n    [isProcessing, isLoading, Menu],\n  )\n\n  const memoizedPopup = useMemo(() => {\n    return (\n      <Popup\n        button={<PluginIcon isLoading={isProcessing || isLoading} />}\n        render={popupRender}\n        verticalAlign=\"bottom\"\n      />\n    )\n  }, [popupRender, isProcessing, isLoading])\n\n  return (\n    <label\n      className={`payloadai-compose__actions ${styles.actions}`}\n      onClick={(e) => e.preventDefault()}\n      role=\"presentation\"\n    >\n      <DocumentDrawer\n        onSave={() => {\n          closeDrawer()\n        }}\n      />\n      {memoizedPopup}\n      <ActiveComponent isLoading={isProcessing || isLoading} stop={stop} />\n      <UndoRedoActions\n        onChange={(val) => {\n          setValue(val)\n          setIfValueIsLexicalState(val)\n        }}\n      />\n    </label>\n  )\n}\n"],"names":["useEditorConfigContext","Popup","useDocumentDrawer","useField","React","useCallback","useMemo","useState","PLUGIN_INSTRUCTIONS_TABLE","setSafeLexicalState","PluginIcon","styles","useMenu","useActiveFieldTracking","useGenerate","UndoRedoActions","Compose","descriptionProps","instructionId","isConfigAllowed","DocumentDrawer","_","closeDrawer","openDrawer","id","collectionSlug","pathFromContext","path","editor","lexicalEditor","isProcessing","setIsProcessing","generate","isLoading","stop","ActiveComponent","Menu","onCompose","console","log","action","catch","reason","error","finally","onExpand","onProofread","onRephrase","onSettings","undefined","onSimplify","onSummarize","onTranslate","data","params","setValue","setIfValueIsLexicalState","val","JSON","stringify","popupRender","close","onClose","memoizedPopup","button","render","verticalAlign","label","className","actions","onClick","e","preventDefault","role","onSave","onChange"],"mappings":"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"}

package/dist/ui/Compose/Compose.jsx

@@ -0,0 +1,141 @@
+'use client';
+import { useEditorConfigContext } from '@payloadcms/richtext-lexical/client';
+import { Popup, useDocumentDrawer, useField } from '@payloadcms/ui';
+import React, { useCallback, useMemo, useState } from 'react';
+import { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js';
+import { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js';
+import { PluginIcon } from '../Icons/Icons.js';
+import styles from './compose.module.css';
+import { useMenu } from './hooks/menu/useMenu.js';
+import { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js';
+import { useGenerate } from './hooks/useGenerate.js';
+import { UndoRedoActions } from './UndoRedoActions.js';
+export const Compose = ({ descriptionProps, instructionId, isConfigAllowed }) => {
+    const [DocumentDrawer, _, { closeDrawer, openDrawer }] = useDocumentDrawer({
+        id: instructionId,
+        collectionSlug: PLUGIN_INSTRUCTIONS_TABLE,
+    });
+    const pathFromContext = descriptionProps?.path;
+    const { editor: lexicalEditor } = useEditorConfigContext();
+    // Initialize global active-field tracking
+    useActiveFieldTracking();
+    const [isProcessing, setIsProcessing] = useState(false);
+    const { generate, isLoading, stop } = useGenerate({ instructionId });
+    const { ActiveComponent, Menu } = useMenu({
+        onCompose: () => {
+            console.log('Composing...');
+            setIsProcessing(true);
+            generate({
+                action: 'Compose',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onExpand: () => {
+            console.log('Expanding...');
+            generate({
+                action: 'Expand',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onProofread: () => {
+            console.log('Proofreading...');
+            generate({
+                action: 'Proofread',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onRephrase: () => {
+            console.log('Rephrasing...');
+            generate({
+                action: 'Rephrase',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onSettings: isConfigAllowed ? openDrawer : undefined,
+        onSimplify: () => {
+            console.log('Simplifying...');
+            generate({
+                action: 'Simplify',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onSummarize: () => {
+            console.log('Summarizing...');
+            generate({
+                action: 'Summarize',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onTranslate: (data) => {
+            console.log('Translating...');
+            generate({
+                action: 'Translate',
+                params: data,
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+    }, {
+        isConfigAllowed,
+    });
+    const { setValue } = useField({
+        path: pathFromContext,
+    });
+    const setIfValueIsLexicalState = useCallback((val) => {
+        if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {
+            setSafeLexicalState(JSON.stringify(val), lexicalEditor);
+        }
+        // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo
+    }, []);
+    const popupRender = useCallback(({ close }) => {
+        return <Menu isLoading={isProcessing || isLoading} onClose={close}/>;
+    }, [isProcessing, isLoading, Menu]);
+    const memoizedPopup = useMemo(() => {
+        return (<Popup button={<PluginIcon isLoading={isProcessing || isLoading}/>} render={popupRender} verticalAlign="bottom"/>);
+    }, [popupRender, isProcessing, isLoading]);
+    return (<label className={`payloadai-compose__actions ${styles.actions}`} onClick={(e) => e.preventDefault()} role="presentation">
+      <DocumentDrawer onSave={() => {
+            closeDrawer();
+        }}/>
+      {memoizedPopup}
+      <ActiveComponent isLoading={isProcessing || isLoading} stop={stop}/>
+      <UndoRedoActions onChange={(val) => {
+            setValue(val);
+            setIfValueIsLexicalState(val);
+        }}/>
+    </label>);
+};

package/dist/ui/Compose/UndoRedoActions.jsx

@@ -0,0 +1,34 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useHistory } from './hooks/useHistory.js';
+export const UndoRedoActions = ({ onChange }) => {
+    const { canRedo, canUndo, redo, undo } = useHistory();
+    const redoHistoryValue = useCallback((event) => {
+        event.stopPropagation();
+        const value = redo();
+        if (value) {
+            onChange(value);
+        }
+    }, [redo]);
+    const undoHistoryValue = useCallback((event) => {
+        event.stopPropagation();
+        const value = undo();
+        if (value) {
+            onChange(value);
+        }
+    }, [undo]);
+    // Delay rendering until the client-side hydration is complete
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    if (!isMounted || (!canUndo && !canRedo))
+        return null;
+    return (<React.Fragment>
+      <button className={`btn btn--size-small btn--style-secondary ${!canUndo && 'btn--disabled'}`} disabled={!canUndo} onClick={undoHistoryValue} style={{ marginBlock: 0 }} type="button">
+        Undo
+      </button>
+      <button className={`btn btn--size-small btn--style-secondary ${!canRedo && 'btn--disabled'}`} disabled={!canRedo} onClick={redoHistoryValue} style={{ marginBlock: 0 }} type="button">
+        Redo
+      </button>
+    </React.Fragment>);
+};

package/dist/ui/Compose/compose.module.css

@@ -1,21 +1,108 @@
 .actions {
   position: relative;
-  margin: 5px 0;
   display: flex;
   gap: 10px;
+  align-items: center;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  padding: 0 5px;
+  margin: 0;
+  z-index: 1;
+  transform: scaleY(0) skewX(90deg) translateY(-5px);
+  transform-origin: top;
+  max-height: 0;
+
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+  perspective: 1000px;
+
+  transition:
+    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 0s linear 0.3s;
+}
+
+:global(.field-type.ai-plugin-active) .actions {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
   padding: 5px 0;
-  transition: all 0.3s ease;
+  margin: 5px 0;
   max-height: 100px;
-  opacity: 1;
-  align-items: center;
-  z-index: auto;
+  transform: scaleY(1) skewX(0) translateY(0) translateZ(0);
+
+  transition:
+    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.actions_hidden {
-  max-height: 0;
-  overflow: hidden;
-  padding: 0 5px;
-  margin: 0;
+:global(.field-type.ai-plugin-active) .actions {
+  animation: removeWillChange 0.3s forwards;
+}
+
+@keyframes removeWillChange {
+  to {
+    will-change: auto;
+  }
+}
+
+.actions > * {
   opacity: 0;
-  z-index: 0;
-}
+  transform: translateY(-3px) translateZ(0);
+
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+
+  transition:
+    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+:global(.field-type.ai-plugin-active) .actions > * {
+  opacity: 1;
+  transform: translateY(0) translateZ(0);
+}
+
+:global(.field-type.ai-plugin-active) .actions > *:nth-child(1) {
+  transition-delay: 0.05s;
+  animation: removeWillChange 0.25s 0.05s forwards;
+}
+
+:global(.field-type.ai-plugin-active) .actions > *:nth-child(2) {
+  transition-delay: 0.08s;
+  animation: removeWillChange 0.28s 0.08s forwards;
+}
+
+:global(.field-type.ai-plugin-active) .actions > *:nth-child(3) {
+  transition-delay: 0.11s;
+  animation: removeWillChange 0.31s 0.11s forwards;
+}
+
+:global(.field-type.ai-plugin-active) .actions > *:nth-child(4) {
+  transition-delay: 0.14s;
+  animation: removeWillChange 0.34s 0.14s forwards;
+}
+
+:global(.field-type.ai-plugin-active) .actions > *:nth-child(5) {
+  transition-delay: 0.17s;
+  animation: removeWillChange 0.37s 0.17s forwards;
+}
+
+@media (prefers-reduced-motion: no-preference) and (min-resolution: 120dpi) {
+  .actions,
+  .actions > * {
+    transition-duration: 0.2s;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .actions,
+  .actions > * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    will-change: auto !important;
+  }
+}

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

@@ -0,0 +1,15 @@
+import React, { memo } from 'react';
+import { ArrowIcon } from '../../../Icons/Icons.js';
+import styles from './menu.module.scss';
+export const Item = memo(({ children, disabled, isActive, onClick, ...rest }) => (<span className={styles.generate_button + ' ' + (isActive ? styles.active : '')} data-disabled={disabled} onClick={!disabled && typeof onClick === 'function'
+        ? onClick
+        : undefined} onKeyDown={!disabled && typeof onClick === 'function'
+        ? onClick
+        : undefined} role="presentation" {...rest}>
+      {children}
+    </span>));
+export const createMenuItem = (IconComponent, initialText) => memo(({ children, disabled, hideIcon, isMenu, onClick, ...rest }) => (<Item disabled={disabled} onClick={onClick} {...rest}>
+      {hideIcon || <IconComponent size={18}/>}
+      {children || <span className={styles.text}>{initialText}</span>}
+      {isMenu && <ArrowIcon size={18}/>}
+    </Item>));

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

@@ -0,0 +1,58 @@
+import locales from 'locale-codes';
+import React, { memo, useState } from 'react';
+import { useInstructions } from '../../../../providers/InstructionsProvider/useInstructions.js';
+import { Item } from './Item.js';
+import { Translate } from './items.js';
+import styles from './menu.module.scss';
+export const TranslateMenu = ({ onClick }) => {
+    const [show, setShow] = useState(false);
+    const { enabledLanguages = [] } = useInstructions();
+    let filteredLocales = locales.all.filter((a) => {
+        return a.tag && a.location;
+    });
+    if (enabledLanguages?.length) {
+        filteredLocales = filteredLocales.filter((a) => enabledLanguages?.includes(a.tag));
+    }
+    const [languages, setLanguages] = useState(filteredLocales);
+    const [inputFocus, setInputFocus] = useState(false);
+    return (<div className={styles.menu} onMouseLeave={() => {
+            if (!inputFocus) {
+                setShow(false);
+            }
+        }}>
+      <Translate isActive={show} isMenu onClick={() => {
+            setShow(!show);
+        }} onMouseEnter={() => setShow(true)}/>
+      <div className={styles.hoverMenu} data-show={show}>
+        <div className={`${styles.menu} ${styles.subMenu}`} style={{
+            background: 'var(--popup-bg)',
+            // minHeight: '300px',
+        }}>
+          <Item onClick={() => { }} style={{
+            background: 'transparent',
+            padding: '0 0 5px 0',
+            position: 'sticky',
+            top: 0,
+        }}>
+            <input className={styles.menuInput} onBlur={() => setInputFocus(false)} onChange={(event) => {
+            const value = event.target.value;
+            setLanguages(filteredLocales.filter((l) => {
+                const lowerCaseValue = value.toLowerCase();
+                return (l.name.toLowerCase().startsWith(lowerCaseValue) ||
+                    (l.location && l.location.toLowerCase().startsWith(lowerCaseValue)) ||
+                    l.tag.toLowerCase().startsWith(lowerCaseValue));
+            }));
+        }} onFocus={() => setInputFocus(true)} placeholder="Search..."/>
+          </Item>
+          {languages.map((locale) => {
+            return (<Item key={locale.tag} onClick={() => {
+                    onClick({ locale: locale.tag });
+                }}>
+                <span className={styles.ellipsis}>{`${locale.location} (${locale.tag})`}</span>
+              </Item>);
+        })}
+        </div>
+      </div>
+    </div>);
+};
+export const MemoizedTranslateMenu = memo(TranslateMenu);

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

@@ -0,0 +1,10 @@
+import { DocsAddOnIcon, EditNoteIcon, SegmentIcon, SpellCheckIcon, StylusNoteIcon, SummarizeIcon, TranslateIcon, TuneIcon, } from '../../../Icons/Icons.js';
+import { createMenuItem } from './Item.js';
+export const Proofread = createMenuItem(SpellCheckIcon, 'Proofread');
+export const Rephrase = createMenuItem(EditNoteIcon, 'Rephrase');
+export const Translate = createMenuItem(TranslateIcon, 'Translate');
+export const Expand = createMenuItem(DocsAddOnIcon, 'Expand');
+export const Summarize = createMenuItem(SummarizeIcon, 'Summarize');
+export const Simplify = createMenuItem(SegmentIcon, 'Simplify');
+export const Compose = createMenuItem(StylusNoteIcon, 'Compose');
+export const Settings = createMenuItem(TuneIcon, 'Settings');

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":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAgB;AACzC,OAAOC,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAI3D,SAASC,aAAa,QAAQ,uDAAsD;AACpF,SAASC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,aAAY;AACzD,SAASC,YAAY,QAAQ,gBAAe;AAC5C,OAAOC,YAAY,qBAAoB;AAEvC,MAAMC,qBAAqB,CAACC;IAC1B,OAAQA;QACN,KAAK;YACH,OAAON;QACT,KAAK;YACH,OAAOC;QACT,KAAK;YACH,OAAOC;QACT;YACE,OAAOA;IACX;AACF;AAEA,OAAO,MAAMK,UAAU,CAACC,YAA2BC;IACjD,MAAM,EAAEC,MAAMC,SAAS,EAAEC,MAAMC,eAAe,EAAE,GAAGd;IACnD,MAAMe,QAAQpB,SAAS;QAAEkB,MAAMC,mBAAmB;IAAG;IACrD,MAAM,CAACE,iBAAiBC,mBAAmB,GAAGlB,SAA0B;IAExE,MAAM,EAAEmB,YAAY,EAAEC,KAAK,EAAE,GAAGJ;IAEhClB,UAAU;QACR,IAAI,CAACsB,OAAO;YACVF,mBAAmB;YACnB;QACF;QAEA,IAAIb,aAAagB,IAAI,CAAC,CAACC,IAAMA,EAAEC,WAAW,EAAEC,SAASX,aAAa,MAAM;YACtEK,mBAAmB;YACnB;QACF;QAEA,IAAI,OAAOE,UAAU,YAAYA,UAAUD,cAAc;YACvDD,mBAAmB;QACrB,OAAO;YACLA,mBAAmB;QACrB;IACF,GAAG;QAACC;QAAcC;QAAOP;KAAU;IAEnC,MAAMY,0BAA0B1B,QAAQ;QACtC,OAAO,CAAC,EAAE2B,SAAS,EAAEC,IAAI,EAA4C;YACnE,MAAMC,kBAAkBrB,mBAAmBU;YAC3C,MAAMY,aAAaxB,aAAayB,IAAI,CAAC,CAACR,IAAMA,EAAES,IAAI,KAAKd;YACvD,qBACE,KAACW;gBACCI,QAAQ;gBACRC,SAAS,CAACC;oBACR,IAAI,CAACR,WAAW;wBACd,MAAMS,UAAUzB,UAAU,CAAC,CAAC,EAAE,EAAEO,iBAAiB,CAAC;wBAClD,IAAI,OAAOkB,YAAY,YAAY;4BACjCA,QAAQD;wBACV,OAAO;4BACLE,QAAQC,KAAK,CAAC,wBAAwBpB;wBACxC;oBACF,OAAO;wBACLU;oBACF;gBACF;gBACAW,OAAOZ,YAAY,kBAAkBG,WAAWE,IAAI;0BAEnDL,aAAaG,WAAWU,WAAW;;QAG1C;IACF,GAAG;QAACtB;QAAiBP;KAAW;IAEhC,MAAM8B,oBAAoBzC,QACxB,IACEM,aAAaoC,MAAM,CAAC,CAACnB;YACnB,IAAIA,EAAES,IAAI,KAAK,cAAc,CAACpB,QAAQ+B,eAAe,EAAE;gBACrD,OAAO;YACT,EAAE,mDAAmD;YACrD,OAAOpB,EAAES,IAAI,KAAKd,mBAAmB,CAACK,EAAEC,WAAW,EAAEC,SAASX,aAAa;QAC7E,IACF;QAACI;QAAiBJ;QAAWF,QAAQ+B,eAAe;KAAC;IAGvD,MAAMC,eAAe5C,QAAQ;QAC3B,OAAO,CAAC,EAAE2B,SAAS,EAAEkB,OAAO,EAA+C,iBACzE,KAACC;gBAAIC,WAAWxC,OAAOyC,IAAI;0BACxBP,kBAAkBQ,GAAG,CAAC,CAAC1B;oBACtB,MAAM2B,SAAS3B,EAAE4B,SAAS;oBAC1B,qBACE,KAACD;wBACCE,UAAUzB;wBAEVO,SAAS,CAACC;4BACR,IAAIZ,EAAES,IAAI,KAAK,YAAY;gCACzBb,mBAAmBI,EAAES,IAAI;4BAC3B;4BAEArB,UAAU,CAAC,CAAC,EAAE,EAAEY,EAAES,IAAI,EAAE,CAAC,GAAGG;4BAC5BU;wBACF;kCAEClB,aAAaJ,EAAEiB,WAAW;uBAVtBjB,EAAES,IAAI;gBAajB;;IAGN,GAAG;QAACS;QAAmB9B;KAAW;IAElC,OAAO;QACLkB,iBAAiBH;QACjB2B,MAAMT;IACR;AACF,EAAC"}
+{"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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"}