@ai-stack/payloadcms 3.2.26 → 3.68.0-beta.2

package/dist/ui/Compose/Compose.js

@@ -1,9 +1,9 @@
 'use client';
 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 { Popup, useField } from '@payloadcms/ui';
 import React, { useCallback, useMemo, useState } from 'react';
-import { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js';
+import { useInstructions } from '../../providers/InstructionsProvider/useInstructions.js';
 import { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js';
 import { PluginIcon } from '../Icons/Icons.js';
 import styles from './compose.module.css';
@@ -11,93 +11,122 @@ 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
-    });
+export const Compose = ({ descriptionProps, forceVisible, instructionId, isConfigAllowed })=>{
     const pathFromContext = descriptionProps?.path;
     const { editor: lexicalEditor } = useEditorConfigContext();
+    // Get global openDrawer from context
+    const { openDrawer } = useInstructions();
     // Initialize global active-field tracking
     useActiveFieldTracking();
     const [isProcessing, setIsProcessing] = useState(false);
-    const { generate, isLoading, stop } = useGenerate({
+    const { generate, isJobActive, isLoading, jobProgress, jobStatus, 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);
-            });
+    // Memoize menu event handlers to prevent recreation on every render
+    const onCompose = useCallback(()=>{
+        console.log('Composing...');
+        setIsProcessing(true);
+        generate({
+            action: 'Compose'
+        }).catch((reason)=>{
+            console.error('Compose : ', reason);
+        }).finally(()=>{
+            setIsProcessing(false);
+        });
+    }, [
+        generate
+    ]);
+    const onExpand = useCallback(()=>{
+        console.log('Expanding...');
+        generate({
+            action: 'Expand'
+        }).catch((reason)=>{
+            console.error('Compose : ', reason);
+        }).finally(()=>{
+            setIsProcessing(false);
+        });
+    }, [
+        generate
+    ]);
+    const onProofread = useCallback(()=>{
+        console.log('Proofreading...');
+        generate({
+            action: 'Proofread'
+        }).catch((reason)=>{
+            console.error('Compose : ', reason);
+        }).finally(()=>{
+            setIsProcessing(false);
+        });
+    }, [
+        generate
+    ]);
+    const onRephrase = useCallback(()=>{
+        console.log('Rephrasing...');
+        generate({
+            action: 'Rephrase'
+        }).catch((reason)=>{
+            console.error('Compose : ', reason);
+        }).finally(()=>{
+            setIsProcessing(false);
+        });
+    }, [
+        generate
+    ]);
+    const onSimplify = useCallback(()=>{
+        console.log('Simplifying...');
+        generate({
+            action: 'Simplify'
+        }).catch((reason)=>{
+            console.error('Compose : ', reason);
+        }).finally(()=>{
+            setIsProcessing(false);
+        });
+    }, [
+        generate
+    ]);
+    const onSummarize = useCallback(()=>{
+        console.log('Summarizing...');
+        generate({
+            action: 'Summarize'
+        }).catch((reason)=>{
+            console.error('Compose : ', reason);
+        }).finally(()=>{
+            setIsProcessing(false);
+        });
+    }, [
+        generate
+    ]);
+    const onTranslate = useCallback((data)=>{
+        console.log('Translating...');
+        generate({
+            action: 'Translate',
+            params: data
+        }).catch((reason)=>{
+            console.error('Compose : ', reason);
+        }).finally(()=>{
+            setIsProcessing(false);
+        });
+    }, [
+        generate
+    ]);
+    const handleOpenSettings = useCallback(()=>{
+        if (isConfigAllowed) {
+            openDrawer(instructionId);
         }
+    }, [
+        isConfigAllowed,
+        openDrawer,
+        instructionId
+    ]);
+    const { ActiveComponent, Menu } = useMenu({
+        onCompose,
+        onExpand,
+        onProofread,
+        onRephrase,
+        onSettings: isConfigAllowed ? handleOpenSettings : undefined,
+        onSimplify,
+        onSummarize,
+        onTranslate
     }, {
         isConfigAllowed
     });
@@ -108,7 +137,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
         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
+    // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo - revisit
     }, []);
     const popupRender = useCallback(({ close })=>{
         return /*#__PURE__*/ _jsx(Menu, {
@@ -120,32 +149,29 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
         isLoading,
         Menu
     ]);
+    // Combine loading states to reduce re-renders
+    const isAnyLoading = isProcessing || isLoading || isJobActive;
     const memoizedPopup = useMemo(()=>{
         return /*#__PURE__*/ _jsx(Popup, {
             button: /*#__PURE__*/ _jsx(PluginIcon, {
-                isLoading: isProcessing || isLoading
+                isLoading: isAnyLoading
             }),
             render: popupRender,
             verticalAlign: "bottom"
         });
     }, [
         popupRender,
-        isProcessing,
-        isLoading
+        isAnyLoading
     ]);
     return /*#__PURE__*/ _jsxs("label", {
-        className: `payloadai-compose__actions ${styles.actions}`,
+        className: `payloadai-compose__actions ${styles.actions} ${forceVisible ? styles.actionsVisible : ''}`,
         onClick: (e)=>e.preventDefault(),
         role: "presentation",
         children: [
-            /*#__PURE__*/ _jsx(DocumentDrawer, {
-                onSave: ()=>{
-                    closeDrawer();
-                }
-            }),
             memoizedPopup,
             /*#__PURE__*/ _jsx(ActiveComponent, {
-                isLoading: isProcessing || isLoading,
+                isLoading: isProcessing || isLoading || isJobActive,
+                loadingLabel: isJobActive ? jobStatus === 'running' ? `Video ${Math.max(0, Math.min(100, Math.round(jobProgress ?? 0)))}%` : jobStatus || 'Queued' : undefined,
                 stop: stop
             }),
             /*#__PURE__*/ _jsx(UndoRedoActions, {

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 { 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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"}
+{"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, useField } from '@payloadcms/ui'\nimport React, { useCallback, useMemo, useState } from 'react'\n\nimport { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js'\nimport { useInstructions } from '../../providers/InstructionsProvider/useInstructions.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\nexport type ComposeProps = {\n  descriptionProps?: {\n    field: ClientField\n    path: string\n    schemaPath: string\n  }\n  forceVisible?: boolean\n  instructionId: string\n  isConfigAllowed: boolean\n}\n\nexport const Compose: FC<ComposeProps> = ({ descriptionProps, forceVisible, instructionId, isConfigAllowed }) => {\n  const pathFromContext = descriptionProps?.path\n  const { editor: lexicalEditor } = useEditorConfigContext()\n  \n  // Get global openDrawer from context\n  const { openDrawer } = useInstructions()\n\n  // Initialize global active-field tracking\n  useActiveFieldTracking()\n\n  const [isProcessing, setIsProcessing] = useState<boolean>(false)\n  const { generate, isJobActive, isLoading, jobProgress, jobStatus, stop } = useGenerate({ instructionId })\n\n  // Memoize menu event handlers to prevent recreation on every render\n  const onCompose = useCallback(() => {\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  }, [generate])\n\n  const onExpand = useCallback(() => {\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  }, [generate])\n\n  const onProofread = useCallback(() => {\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  }, [generate])\n\n  const onRephrase = useCallback(() => {\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  }, [generate])\n\n  const onSimplify = useCallback(() => {\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  }, [generate])\n\n  const onSummarize = useCallback(() => {\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  }, [generate])\n\n  const onTranslate = useCallback((data: unknown) => {\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  }, [generate])\n\n  const handleOpenSettings = useCallback(() => {\n    if (isConfigAllowed) {\n      openDrawer(instructionId)\n    }\n  }, [isConfigAllowed, openDrawer, instructionId])\n\n  const { ActiveComponent, Menu } = useMenu(\n    {\n      onCompose,\n      onExpand,\n      onProofread,\n      onRephrase,\n      onSettings: isConfigAllowed ? handleOpenSettings : undefined,\n      onSimplify,\n      onSummarize,\n      onTranslate,\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 - revisit\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  // Combine loading states to reduce re-renders\n  const isAnyLoading = isProcessing || isLoading || isJobActive\n\n  const memoizedPopup = useMemo(() => {\n    return (\n      <Popup\n        button={<PluginIcon isLoading={isAnyLoading} />}\n        render={popupRender}\n        verticalAlign=\"bottom\"\n      />\n    )\n  }, [popupRender, isAnyLoading])\n\n  return (\n    <label\n      className={`payloadai-compose__actions ${styles.actions} ${forceVisible ? styles.actionsVisible : ''}`}\n      onClick={(e) => e.preventDefault()}\n      role=\"presentation\"\n    >\n      {memoizedPopup}\n      <ActiveComponent\n        isLoading={isProcessing || isLoading || isJobActive}\n        loadingLabel={isJobActive ? (jobStatus === 'running' ? `Video ${Math.max(0, Math.min(100, Math.round(jobProgress ?? 0)))}%` : (jobStatus || 'Queued')) : undefined}\n        stop={stop}\n      />\n      <UndoRedoActions\n        onChange={(val) => {\n          setValue(val)\n          setIfValueIsLexicalState(val)\n        }}\n      />\n    </label>\n  )\n}\n"],"names":["useEditorConfigContext","Popup","useField","React","useCallback","useMemo","useState","useInstructions","setSafeLexicalState","PluginIcon","styles","useMenu","useActiveFieldTracking","useGenerate","UndoRedoActions","Compose","descriptionProps","forceVisible","instructionId","isConfigAllowed","pathFromContext","path","editor","lexicalEditor","openDrawer","isProcessing","setIsProcessing","generate","isJobActive","isLoading","jobProgress","jobStatus","stop","onCompose","console","log","action","catch","reason","error","finally","onExpand","onProofread","onRephrase","onSimplify","onSummarize","onTranslate","data","params","handleOpenSettings","ActiveComponent","Menu","onSettings","undefined","setValue","setIfValueIsLexicalState","val","JSON","stringify","popupRender","close","onClose","isAnyLoading","memoizedPopup","button","render","verticalAlign","label","className","actions","actionsVisible","onClick","e","preventDefault","role","loadingLabel","Math","max","min","round","onChange"],"mappings":"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"}

package/dist/ui/Compose/Compose.jsx

@@ -1,8 +1,8 @@
 'use client';
 import { useEditorConfigContext } from '@payloadcms/richtext-lexical/client';
-import { Popup, useDocumentDrawer, useField } from '@payloadcms/ui';
+import { Popup, useField } from '@payloadcms/ui';
 import React, { useCallback, useMemo, useState } from 'react';
-import { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js';
+import { useInstructions } from '../../providers/InstructionsProvider/useInstructions.js';
 import { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js';
 import { PluginIcon } from '../Icons/Icons.js';
 import styles from './compose.module.css';
@@ -10,105 +10,116 @@ 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,
-    });
+export const Compose = ({ descriptionProps, forceVisible, instructionId, isConfigAllowed }) => {
     const pathFromContext = descriptionProps?.path;
     const { editor: lexicalEditor } = useEditorConfigContext();
+    // Get global openDrawer from context
+    const { openDrawer } = useInstructions();
     // Initialize global active-field tracking
     useActiveFieldTracking();
     const [isProcessing, setIsProcessing] = useState(false);
-    const { generate, isLoading, stop } = useGenerate({ instructionId });
+    const { generate, isJobActive, isLoading, jobProgress, jobStatus, stop } = useGenerate({ instructionId });
+    // Memoize menu event handlers to prevent recreation on every render
+    const onCompose = useCallback(() => {
+        console.log('Composing...');
+        setIsProcessing(true);
+        generate({
+            action: 'Compose',
+        })
+            .catch((reason) => {
+            console.error('Compose : ', reason);
+        })
+            .finally(() => {
+            setIsProcessing(false);
+        });
+    }, [generate]);
+    const onExpand = useCallback(() => {
+        console.log('Expanding...');
+        generate({
+            action: 'Expand',
+        })
+            .catch((reason) => {
+            console.error('Compose : ', reason);
+        })
+            .finally(() => {
+            setIsProcessing(false);
+        });
+    }, [generate]);
+    const onProofread = useCallback(() => {
+        console.log('Proofreading...');
+        generate({
+            action: 'Proofread',
+        })
+            .catch((reason) => {
+            console.error('Compose : ', reason);
+        })
+            .finally(() => {
+            setIsProcessing(false);
+        });
+    }, [generate]);
+    const onRephrase = useCallback(() => {
+        console.log('Rephrasing...');
+        generate({
+            action: 'Rephrase',
+        })
+            .catch((reason) => {
+            console.error('Compose : ', reason);
+        })
+            .finally(() => {
+            setIsProcessing(false);
+        });
+    }, [generate]);
+    const onSimplify = useCallback(() => {
+        console.log('Simplifying...');
+        generate({
+            action: 'Simplify',
+        })
+            .catch((reason) => {
+            console.error('Compose : ', reason);
+        })
+            .finally(() => {
+            setIsProcessing(false);
+        });
+    }, [generate]);
+    const onSummarize = useCallback(() => {
+        console.log('Summarizing...');
+        generate({
+            action: 'Summarize',
+        })
+            .catch((reason) => {
+            console.error('Compose : ', reason);
+        })
+            .finally(() => {
+            setIsProcessing(false);
+        });
+    }, [generate]);
+    const onTranslate = useCallback((data) => {
+        console.log('Translating...');
+        generate({
+            action: 'Translate',
+            params: data,
+        })
+            .catch((reason) => {
+            console.error('Compose : ', reason);
+        })
+            .finally(() => {
+            setIsProcessing(false);
+        });
+    }, [generate]);
+    const handleOpenSettings = useCallback(() => {
+        if (isConfigAllowed) {
+            openDrawer(instructionId);
+        }
+    }, [isConfigAllowed, openDrawer, 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);
-            });
-        },
+        onCompose,
+        onExpand,
+        onProofread,
+        onRephrase,
+        onSettings: isConfigAllowed ? handleOpenSettings : undefined,
+        onSimplify,
+        onSummarize,
+        onTranslate,
     }, {
         isConfigAllowed,
     });
@@ -119,20 +130,19 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed }) =>
         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
+        // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo - revisit
     }, []);
     const popupRender = useCallback(({ close }) => {
         return <Menu isLoading={isProcessing || isLoading} onClose={close}/>;
     }, [isProcessing, isLoading, Menu]);
+    // Combine loading states to reduce re-renders
+    const isAnyLoading = isProcessing || isLoading || isJobActive;
     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();
-        }}/>
+        return (<Popup button={<PluginIcon isLoading={isAnyLoading}/>} render={popupRender} verticalAlign="bottom"/>);
+    }, [popupRender, isAnyLoading]);
+    return (<label className={`payloadai-compose__actions ${styles.actions} ${forceVisible ? styles.actionsVisible : ''}`} onClick={(e) => e.preventDefault()} role="presentation">
       {memoizedPopup}
-      <ActiveComponent isLoading={isProcessing || isLoading} stop={stop}/>
+      <ActiveComponent isLoading={isProcessing || isLoading || isJobActive} loadingLabel={isJobActive ? (jobStatus === 'running' ? `Video ${Math.max(0, Math.min(100, Math.round(jobProgress ?? 0)))}%` : (jobStatus || 'Queued')) : undefined} stop={stop}/>
       <UndoRedoActions onChange={(val) => {
             setValue(val);
             setIfValueIsLexicalState(val);

package/dist/ui/Compose/ComposePlaceholder.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+import type { ComposeProps } from './Compose.js';
+/**
+ * Lightweight placeholder component that lazy-loads Compose when field becomes active.
+ * Uses MutationObserver to watch for .ai-plugin-active class added by useActiveFieldTracking.
+ */
+export declare const ComposePlaceholder: FC<ComposeProps>;

package/dist/ui/Compose/ComposePlaceholder.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { Compose } from './Compose.js';
+/**
+ * Lightweight placeholder component that lazy-loads Compose when field becomes active.
+ * Uses MutationObserver to watch for .ai-plugin-active class added by useActiveFieldTracking.
+ */ export const ComposePlaceholder = (props)=>{
+    const [shouldMount, setShouldMount] = useState(false);
+    const containerRef = useRef(null);
+    const unmountTimerRef = useRef(null);
+    useEffect(()=>{
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        // Find the parent .field-type container
+        const fieldContainer = container.closest('.field-type');
+        if (!fieldContainer) {
+            return;
+        }
+        // Watch for .ai-plugin-active class changes
+        const observer = new MutationObserver((mutations)=>{
+            for (const mutation of mutations){
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    if (fieldContainer.classList.contains('ai-plugin-active')) {
+                        // Field is active - mount Compose and cancel any pending unmount
+                        if (unmountTimerRef.current) {
+                            clearTimeout(unmountTimerRef.current);
+                            unmountTimerRef.current = null;
+                        }
+                        setShouldMount(true);
+                    } else if (shouldMount) {
+                        // Field is inactive - schedule unmount after delay
+                        if (unmountTimerRef.current) {
+                            clearTimeout(unmountTimerRef.current);
+                        }
+                        unmountTimerRef.current = setTimeout(()=>{
+                            setShouldMount(false);
+                            unmountTimerRef.current = null;
+                        }, 1200) // 500ms delay to prevent rapid remounting
+                        ;
+                    }
+                    break;
+                }
+            }
+        });
+        observer.observe(fieldContainer, {
+            attributeFilter: [
+                'class'
+            ],
+            attributes: true
+        });
+        // Check initial state in case field is already active
+        if (fieldContainer.classList.contains('ai-plugin-active')) {
+            setShouldMount(true);
+        }
+        return ()=>{
+            observer.disconnect();
+            if (unmountTimerRef.current) {
+                clearTimeout(unmountTimerRef.current);
+            }
+        };
+    }, [
+        shouldMount
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        ref: containerRef,
+        style: {
+            display: 'contents'
+        },
+        children: shouldMount ? /*#__PURE__*/ _jsx(Compose, {
+            ...props
+        }) : null
+    });
+};
+
+//# sourceMappingURL=ComposePlaceholder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/Compose/ComposePlaceholder.tsx"],"sourcesContent":["'use client'\n\nimport type { FC } from 'react'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport type { ComposeProps } from './Compose.js'\n\nimport { Compose } from './Compose.js'\n\n/**\n * Lightweight placeholder component that lazy-loads Compose when field becomes active.\n * Uses MutationObserver to watch for .ai-plugin-active class added by useActiveFieldTracking.\n */\nexport const ComposePlaceholder: FC<ComposeProps> = (props) => {\n  const [shouldMount, setShouldMount] = useState(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const unmountTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) {\n      return\n    }\n\n    // Find the parent .field-type container\n    const fieldContainer = container.closest('.field-type')\n    if (!fieldContainer) {\n      return\n    }\n\n    // Watch for .ai-plugin-active class changes\n    const observer = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {\n          if (fieldContainer.classList.contains('ai-plugin-active')) {\n            // Field is active - mount Compose and cancel any pending unmount\n            if (unmountTimerRef.current) {\n              clearTimeout(unmountTimerRef.current)\n              unmountTimerRef.current = null\n            }\n            setShouldMount(true)\n          } else if (shouldMount) {\n            // Field is inactive - schedule unmount after delay\n            if (unmountTimerRef.current) {\n              clearTimeout(unmountTimerRef.current)\n            }\n            unmountTimerRef.current = setTimeout(() => {\n              setShouldMount(false)\n              unmountTimerRef.current = null\n            }, 1200) // 500ms delay to prevent rapid remounting\n          }\n          break\n        }\n      }\n    })\n\n    observer.observe(fieldContainer, {\n      attributeFilter: ['class'],\n      attributes: true,\n    })\n\n    // Check initial state in case field is already active\n    if (fieldContainer.classList.contains('ai-plugin-active')) {\n      setShouldMount(true)\n    }\n\n    return () => {\n      observer.disconnect()\n      if (unmountTimerRef.current) {\n        clearTimeout(unmountTimerRef.current)\n      }\n    }\n  }, [shouldMount])\n\n  return (\n    <div ref={containerRef} style={{ display: 'contents' }}>\n      {shouldMount ? <Compose {...props} /> : null}\n    </div>\n  )\n}\n"],"names":["React","useEffect","useRef","useState","Compose","ComposePlaceholder","props","shouldMount","setShouldMount","containerRef","unmountTimerRef","container","current","fieldContainer","closest","observer","MutationObserver","mutations","mutation","type","attributeName","classList","contains","clearTimeout","setTimeout","observe","attributeFilter","attributes","disconnect","div","ref","style","display"],"mappings":"AAAA;;AAIA,OAAOA,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAI1D,SAASC,OAAO,QAAQ,eAAc;AAEtC;;;CAGC,GACD,OAAO,MAAMC,qBAAuC,CAACC;IACnD,MAAM,CAACC,aAAaC,eAAe,GAAGL,SAAS;IAC/C,MAAMM,eAAeP,OAAuB;IAC5C,MAAMQ,kBAAkBR,OAA6C;IAErED,UAAU;QACR,MAAMU,YAAYF,aAAaG,OAAO;QACtC,IAAI,CAACD,WAAW;YACd;QACF;QAEA,wCAAwC;QACxC,MAAME,iBAAiBF,UAAUG,OAAO,CAAC;QACzC,IAAI,CAACD,gBAAgB;YACnB;QACF;QAEA,4CAA4C;QAC5C,MAAME,WAAW,IAAIC,iBAAiB,CAACC;YACrC,KAAK,MAAMC,YAAYD,UAAW;gBAChC,IAAIC,SAASC,IAAI,KAAK,gBAAgBD,SAASE,aAAa,KAAK,SAAS;oBACxE,IAAIP,eAAeQ,SAAS,CAACC,QAAQ,CAAC,qBAAqB;wBACzD,iEAAiE;wBACjE,IAAIZ,gBAAgBE,OAAO,EAAE;4BAC3BW,aAAab,gBAAgBE,OAAO;4BACpCF,gBAAgBE,OAAO,GAAG;wBAC5B;wBACAJ,eAAe;oBACjB,OAAO,IAAID,aAAa;wBACtB,mDAAmD;wBACnD,IAAIG,gBAAgBE,OAAO,EAAE;4BAC3BW,aAAab,gBAAgBE,OAAO;wBACtC;wBACAF,gBAAgBE,OAAO,GAAGY,WAAW;4BACnChB,eAAe;4BACfE,gBAAgBE,OAAO,GAAG;wBAC5B,GAAG,MAAM,0CAA0C;;oBACrD;oBACA;gBACF;YACF;QACF;QAEAG,SAASU,OAAO,CAACZ,gBAAgB;YAC/Ba,iBAAiB;gBAAC;aAAQ;YAC1BC,YAAY;QACd;QAEA,sDAAsD;QACtD,IAAId,eAAeQ,SAAS,CAACC,QAAQ,CAAC,qBAAqB;YACzDd,eAAe;QACjB;QAEA,OAAO;YACLO,SAASa,UAAU;YACnB,IAAIlB,gBAAgBE,OAAO,EAAE;gBAC3BW,aAAab,gBAAgBE,OAAO;YACtC;QACF;IACF,GAAG;QAACL;KAAY;IAEhB,qBACE,KAACsB;QAAIC,KAAKrB;QAAcsB,OAAO;YAAEC,SAAS;QAAW;kBAClDzB,4BAAc,KAACH;YAAS,GAAGE,KAAK;aAAO;;AAG9C,EAAC"}