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

package/dist/ui/AIConfigDashboard/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/AIConfigDashboard/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nexport const AIConfigDashboard: React.FC = () => {\n  return (\n    <div\n      style={{\n        alignItems: 'center',\n        background: 'var(--theme-elevation-50)',\n        border: '1px solid var(--theme-elevation-150)',\n        borderRadius: '8px',\n        display: 'flex',\n        justifyContent: 'space-between',\n        marginBottom: '20px',\n        padding: '20px',\n      }}\n    >\n      <div>\n        <h4 style={{ margin: '0 0 5px 0' }}>AI Configuration</h4>\n        <p style={{ color: 'var(--theme-elevation-500)', fontSize: '14px', margin: '0' }}>\n          Manage your AI providers, API keys, and default models.\n        </p>\n      </div>\n      <a href=\"/admin/globals/ai-settings\">\n        <button className=\"btn btn--style-primary btn--size-small\">Manage AI Settings</button>\n      </a>\n    </div>\n  )\n}\n"],"names":["React","AIConfigDashboard","div","style","alignItems","background","border","borderRadius","display","justifyContent","marginBottom","padding","h4","margin","p","color","fontSize","a","href","button","className"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAEzB,OAAO,MAAMC,oBAA8B;IACzC,qBACE,MAACC;QACCC,OAAO;YACLC,YAAY;YACZC,YAAY;YACZC,QAAQ;YACRC,cAAc;YACdC,SAAS;YACTC,gBAAgB;YAChBC,cAAc;YACdC,SAAS;QACX;;0BAEA,MAACT;;kCACC,KAACU;wBAAGT,OAAO;4BAAEU,QAAQ;wBAAY;kCAAG;;kCACpC,KAACC;wBAAEX,OAAO;4BAAEY,OAAO;4BAA8BC,UAAU;4BAAQH,QAAQ;wBAAI;kCAAG;;;;0BAIpF,KAACI;gBAAEC,MAAK;0BACN,cAAA,KAACC;oBAAOC,WAAU;8BAAyC;;;;;AAInE,EAAC"}
+{"version":3,"sources":["../../../src/ui/AIConfigDashboard/index.tsx"],"sourcesContent":["'use client'\n\nimport { Button, toast, useConfig } from '@payloadcms/ui'\n// @ts-expect-error - Next.js types are not resolving correctly with nodenext but runtime is fine\nimport { useRouter } from 'next/navigation'\nimport React, { useContext, useEffect, useState } from 'react'\n\nimport { excludeCollections } from '../../defaults.js'\nimport { InstructionsContext } from '../../providers/InstructionsProvider/context.js'\n\nexport const AIConfigDashboard: React.FC = () => {\n  const {\n    config: {\n      collections,\n      routes: { admin: adminRoute, api: apiRoute },\n    },\n  } = useConfig()\n  const router = useRouter()\n  const { refresh, setEnabledCollections: setEnabledCollectionsInContext } =\n    useContext(InstructionsContext)\n\n  const [enabledCollections, setEnabledCollections] = useState<string[]>([])\n  const [isLoading, setIsLoading] = useState(true)\n  const [isSaving, setIsSaving] = useState(false)\n\n  const availableCollections = collections.filter(\n    (c) =>\n      !excludeCollections.includes(c.slug) &&\n      !(c.admin as unknown as { hidden?: ((args: any) => boolean) | boolean })?.hidden,\n  )\n\n  useEffect(() => {\n    const fetchSettings = async () => {\n      try {\n        const response = await fetch(`${apiRoute}/globals/ai-settings`)\n        if (response.ok) {\n          const data = await response.json()\n          // Handle both simple array and object wrapper if Payload wraps it\n          const storedEnabled = data.enabledCollections || []\n          setEnabledCollections(Array.isArray(storedEnabled) ? storedEnabled : [])\n        }\n      } catch (error) {\n        console.error('Failed to fetch AI settings:', error)\n      } finally {\n        setIsLoading(false)\n      }\n    }\n\n    fetchSettings().catch((e) => {\n      console.log(e)\n    })\n  }, [apiRoute])\n\n  const handleToggle = (slug: string) => {\n    setEnabledCollections((prev) => {\n      if (prev.includes(slug)) {\n        return prev.filter((s) => s !== slug)\n      }\n      return [...prev, slug]\n    })\n  }\n\n  const handleSave = async () => {\n    setIsSaving(true)\n    try {\n      // First fetch current settings to get ID or just rely on global update behavior\n      // We need to adhere to Payload's global update API\n      const response = await fetch(`${apiRoute}/globals/ai-settings`, {\n        body: JSON.stringify({\n          enabledCollections,\n        }),\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      })\n\n      if (response.ok) {\n        toast.success('Settings saved successfully')\n        if (setEnabledCollectionsInContext) {\n          setEnabledCollectionsInContext(enabledCollections)\n        }\n        if (refresh) {\n          await refresh()\n        }\n        router.refresh()\n      } else {\n        toast.error('Failed to save settings')\n      }\n    } catch (error) {\n      console.error('Error saving settings:', error)\n      toast.error('Error saving settings')\n    } finally {\n      setIsSaving(false)\n    }\n  }\n\n  if (isLoading) {\n    return <div style={{ padding: '20px', textAlign: 'center' }}>Loading AI configuration...</div>\n  }\n\n  return (\n    <div\n      style={{\n        background: 'var(--theme-elevation-50)',\n        // border: '1px solid var(--theme-elevation-150)',\n        // borderRadius: '8px',\n        marginBottom: '20px',\n        overflow: 'hidden',\n      }}\n    >\n      <div\n        style={{\n          alignItems: 'center',\n          borderBottom: '1px solid var(--theme-elevation-150)',\n          display: 'flex',\n          justifyContent: 'space-between',\n          padding: '20px',\n        }}\n      >\n        <div>\n          <h4 style={{ margin: '0 0 5px 0' }}>AI Configuration</h4>\n          <p style={{ color: 'var(--theme-elevation-500)', fontSize: '14px', margin: '0' }}>\n            Manage your AI providers, API keys, and enable AI for specific collections.\n          </p>\n        </div>\n        <div style={{ display: 'flex', gap: '10px' }}>\n          <Button buttonStyle=\"secondary\" el=\"link\" to={`${adminRoute}/globals/ai-settings`}>\n            Settings\n          </Button>\n          <Button\n            disabled={isSaving}\n            onClick={handleSave}\n          >\n            {isSaving ? 'Saving...' : 'Save Changes'}\n          </Button>\n        </div>\n      </div>\n\n      <div style={{ padding: '20px' }}>\n        <h5 style={{ marginBottom: '15px' }}>Enabled Collections</h5>\n        <div\n          style={{\n            display: 'grid',\n            gap: '15px',\n            gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',\n          }}\n        >\n          {availableCollections.map((collection) => {\n            const isEnabled = enabledCollections.includes(collection.slug)\n            return (\n              <button\n                key={collection.slug}\n                onClick={() => handleToggle(collection.slug)}\n                style={{\n                  alignItems: 'center',\n                  background: isEnabled\n                    ? 'var(--theme-elevation-100)'\n                    : 'var(--theme-elevation-50)',\n                  border: `1px solid ${isEnabled ? 'var(--theme-text-success)' : 'var(--theme-elevation-200)'}`,\n                  borderRadius: '6px',\n                  cursor: 'pointer',\n                  display: 'flex',\n                  gap: '10px',\n                  padding: '10px 15px',\n                  textAlign: 'left',\n                  transition: 'all 0.2s ease',\n                  width: '100%',\n                }}\n                type=\"button\"\n              >\n                <div\n                  style={{\n                    alignItems: 'center',\n                    background: isEnabled\n                      ? 'var(--theme-text-success)'\n                      : 'var(--theme-elevation-200)',\n                    borderRadius: '12px',\n                    display: 'flex',\n                    height: '24px',\n                    justifyContent: isEnabled ? 'flex-end' : 'flex-start',\n                    padding: '2px',\n                    transition: 'all 0.2s ease',\n                    width: '44px',\n                  }}\n                >\n                  <div\n                    style={{\n                      background: 'white',\n                      borderRadius: '50%',\n                      height: '20px',\n                      width: '20px',\n                    }}\n                  />\n                </div>\n                <span style={{ fontWeight: 500 }}>\n                  {typeof collection.labels?.singular === 'string'\n                    ? collection.labels.singular\n                    : collection.labels?.singular?.en || collection.slug}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["Button","toast","useConfig","useRouter","React","useContext","useEffect","useState","excludeCollections","InstructionsContext","AIConfigDashboard","config","collections","routes","admin","adminRoute","api","apiRoute","router","refresh","setEnabledCollections","setEnabledCollectionsInContext","enabledCollections","isLoading","setIsLoading","isSaving","setIsSaving","availableCollections","filter","c","includes","slug","hidden","fetchSettings","response","fetch","ok","data","json","storedEnabled","Array","isArray","error","console","catch","e","log","handleToggle","prev","s","handleSave","body","JSON","stringify","headers","method","success","div","style","padding","textAlign","background","marginBottom","overflow","alignItems","borderBottom","display","justifyContent","h4","margin","p","color","fontSize","gap","buttonStyle","el","to","disabled","onClick","h5","gridTemplateColumns","map","collection","isEnabled","button","border","borderRadius","cursor","transition","width","type","height","span","fontWeight","labels","singular","en"],"mappings":"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"}

package/dist/ui/AIConfigDashboard/index.jsx

@@ -1,24 +1,170 @@
 'use client';
-import React from 'react';
+import { Button, toast, useConfig } from '@payloadcms/ui';
+// @ts-expect-error - Next.js types are not resolving correctly with nodenext but runtime is fine
+import { useRouter } from 'next/navigation';
+import React, { useContext, useEffect, useState } from 'react';
+import { excludeCollections } from '../../defaults.js';
+import { InstructionsContext } from '../../providers/InstructionsProvider/context.js';
 export const AIConfigDashboard = () => {
+    const { config: { collections, routes: { admin: adminRoute, api: apiRoute }, }, } = useConfig();
+    const router = useRouter();
+    const { refresh, setEnabledCollections: setEnabledCollectionsInContext } = useContext(InstructionsContext);
+    const [enabledCollections, setEnabledCollections] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const availableCollections = collections.filter((c) => !excludeCollections.includes(c.slug) &&
+        !c.admin?.hidden);
+    useEffect(() => {
+        const fetchSettings = async () => {
+            try {
+                const response = await fetch(`${apiRoute}/globals/ai-settings`);
+                if (response.ok) {
+                    const data = await response.json();
+                    // Handle both simple array and object wrapper if Payload wraps it
+                    const storedEnabled = data.enabledCollections || [];
+                    setEnabledCollections(Array.isArray(storedEnabled) ? storedEnabled : []);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch AI settings:', error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        fetchSettings().catch((e) => {
+            console.log(e);
+        });
+    }, [apiRoute]);
+    const handleToggle = (slug) => {
+        setEnabledCollections((prev) => {
+            if (prev.includes(slug)) {
+                return prev.filter((s) => s !== slug);
+            }
+            return [...prev, slug];
+        });
+    };
+    const handleSave = async () => {
+        setIsSaving(true);
+        try {
+            // First fetch current settings to get ID or just rely on global update behavior
+            // We need to adhere to Payload's global update API
+            const response = await fetch(`${apiRoute}/globals/ai-settings`, {
+                body: JSON.stringify({
+                    enabledCollections,
+                }),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                method: 'POST',
+            });
+            if (response.ok) {
+                toast.success('Settings saved successfully');
+                if (setEnabledCollectionsInContext) {
+                    setEnabledCollectionsInContext(enabledCollections);
+                }
+                if (refresh) {
+                    await refresh();
+                }
+                router.refresh();
+            }
+            else {
+                toast.error('Failed to save settings');
+            }
+        }
+        catch (error) {
+            console.error('Error saving settings:', error);
+            toast.error('Error saving settings');
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    if (isLoading) {
+        return <div style={{ padding: '20px', textAlign: 'center' }}>Loading AI configuration...</div>;
+    }
     return (<div style={{
-            alignItems: 'center',
             background: 'var(--theme-elevation-50)',
-            border: '1px solid var(--theme-elevation-150)',
-            borderRadius: '8px',
+            // border: '1px solid var(--theme-elevation-150)',
+            // borderRadius: '8px',
+            marginBottom: '20px',
+            overflow: 'hidden',
+        }}>
+      <div style={{
+            alignItems: 'center',
+            borderBottom: '1px solid var(--theme-elevation-150)',
             display: 'flex',
             justifyContent: 'space-between',
-            marginBottom: '20px',
             padding: '20px',
         }}>
-      <div>
-        <h4 style={{ margin: '0 0 5px 0' }}>AI Configuration</h4>
-        <p style={{ color: 'var(--theme-elevation-500)', fontSize: '14px', margin: '0' }}>
-          Manage your AI providers, API keys, and default models.
-        </p>
+        <div>
+          <h4 style={{ margin: '0 0 5px 0' }}>AI Configuration</h4>
+          <p style={{ color: 'var(--theme-elevation-500)', fontSize: '14px', margin: '0' }}>
+            Manage your AI providers, API keys, and enable AI for specific collections.
+          </p>
+        </div>
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <Button buttonStyle="secondary" el="link" to={`${adminRoute}/globals/ai-settings`}>
+            Settings
+          </Button>
+          <Button disabled={isSaving} onClick={handleSave}>
+            {isSaving ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </div>
+      </div>
+
+      <div style={{ padding: '20px' }}>
+        <h5 style={{ marginBottom: '15px' }}>Enabled Collections</h5>
+        <div style={{
+            display: 'grid',
+            gap: '15px',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
+        }}>
+          {availableCollections.map((collection) => {
+            const isEnabled = enabledCollections.includes(collection.slug);
+            return (<button key={collection.slug} onClick={() => handleToggle(collection.slug)} style={{
+                    alignItems: 'center',
+                    background: isEnabled
+                        ? 'var(--theme-elevation-100)'
+                        : 'var(--theme-elevation-50)',
+                    border: `1px solid ${isEnabled ? 'var(--theme-text-success)' : 'var(--theme-elevation-200)'}`,
+                    borderRadius: '6px',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    gap: '10px',
+                    padding: '10px 15px',
+                    textAlign: 'left',
+                    transition: 'all 0.2s ease',
+                    width: '100%',
+                }} type="button">
+                <div style={{
+                    alignItems: 'center',
+                    background: isEnabled
+                        ? 'var(--theme-text-success)'
+                        : 'var(--theme-elevation-200)',
+                    borderRadius: '12px',
+                    display: 'flex',
+                    height: '24px',
+                    justifyContent: isEnabled ? 'flex-end' : 'flex-start',
+                    padding: '2px',
+                    transition: 'all 0.2s ease',
+                    width: '44px',
+                }}>
+                  <div style={{
+                    background: 'white',
+                    borderRadius: '50%',
+                    height: '20px',
+                    width: '20px',
+                }}/>
+                </div>
+                <span style={{ fontWeight: 500 }}>
+                  {typeof collection.labels?.singular === 'string'
+                    ? collection.labels.singular
+                    : collection.labels?.singular?.en || collection.slug}
+                </span>
+              </button>);
+        })}
+        </div>
       </div>
-      <a href="/admin/globals/ai-settings">
-        <button className="btn btn--style-primary btn--size-small">Manage AI Settings</button>
-      </a>
     </div>);
 };

package/dist/ui/Compose/Compose.js

@@ -134,9 +134,28 @@ export const Compose = ({ descriptionProps, forceVisible, instructionId, isConfi
         path: pathFromContext
     });
     const setIfValueIsLexicalState = useCallback((val)=>{
-        if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {
-            setSafeLexicalState(JSON.stringify(val), lexicalEditor);
+        // Prevent setting incomplete states during streaming
+        if (!val || typeof val !== 'object' || !('root' in val) || !lexicalEditor) {
+            return;
         }
+        // Validate that the state is complete before setting
+        // Check for common incomplete streaming states
+        if (!val.root || typeof val.root !== 'object' || Object.keys(val.root).length === 0) {
+            return;
+        }
+        if (val.root.type !== 'root') {
+            return;
+        }
+        if (!val.root.children || !Array.isArray(val.root.children) || val.root.children.length === 0) {
+            return;
+        }
+        // Check for invalid child types (common streaming issue)
+        const hasInvalidChildren = val.root.children.some((child)=>!child || !child.type || child.type === 'undefined' || child.type === '');
+        if (hasInvalidChildren) {
+            return;
+        }
+        // State looks valid, proceed
+        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 - revisit
     }, []);
     const popupRender = useCallback(({ close })=>{

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, 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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"}
+{"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    // Prevent setting incomplete states during streaming\n    if (!val || typeof val !== 'object' || !('root' in val) || !lexicalEditor) {\n      return\n    }\n\n    // Validate that the state is complete before setting\n    // Check for common incomplete streaming states\n    if (!val.root || typeof val.root !== 'object' || Object.keys(val.root).length === 0) {\n      return\n    }\n\n    if (val.root.type !== 'root') {\n      return\n    }\n\n    if (!val.root.children || !Array.isArray(val.root.children) || val.root.children.length === 0) {\n      return\n    }\n\n    // Check for invalid child types (common streaming issue)\n    const hasInvalidChildren = val.root.children.some(\n      (child: any) => !child || !child.type || child.type === 'undefined' || child.type === '',\n    )\n\n    if (hasInvalidChildren) {\n      return\n    }\n\n    // State looks valid, proceed\n    setSafeLexicalState(JSON.stringify(val), lexicalEditor)\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","root","Object","keys","length","type","children","Array","isArray","hasInvalidChildren","some","child","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

@@ -127,9 +127,28 @@ export const Compose = ({ descriptionProps, forceVisible, instructionId, isConfi
         path: pathFromContext,
     });
     const setIfValueIsLexicalState = useCallback((val) => {
-        if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {
-            setSafeLexicalState(JSON.stringify(val), lexicalEditor);
+        // Prevent setting incomplete states during streaming
+        if (!val || typeof val !== 'object' || !('root' in val) || !lexicalEditor) {
+            return;
         }
+        // Validate that the state is complete before setting
+        // Check for common incomplete streaming states
+        if (!val.root || typeof val.root !== 'object' || Object.keys(val.root).length === 0) {
+            return;
+        }
+        if (val.root.type !== 'root') {
+            return;
+        }
+        if (!val.root.children || !Array.isArray(val.root.children) || val.root.children.length === 0) {
+            return;
+        }
+        // Check for invalid child types (common streaming issue)
+        const hasInvalidChildren = val.root.children.some((child) => !child || !child.type || child.type === 'undefined' || child.type === '');
+        if (hasInvalidChildren) {
+            return;
+        }
+        // State looks valid, proceed
+        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 - revisit
     }, []);
     const popupRender = useCallback(({ close }) => {

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

@@ -1,14 +1,14 @@
 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 { toast, useDocumentInfo, useField, useForm, useLocale } from '@payloadcms/ui';
 import { jsonSchema } from 'ai';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { PLUGIN_AI_JOBS_TABLE, PLUGIN_API_ENDPOINT_GENERATE, PLUGIN_API_ENDPOINT_GENERATE_UPLOAD, PLUGIN_INSTRUCTIONS_TABLE, PLUGIN_NAME } from '../../../defaults.js';
+import { useCallback, useEffect, useRef } from 'react';
+import { PLUGIN_API_ENDPOINT_GENERATE } 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 { useGenerateUpload } from './useGenerateUpload.js';
 import { useHistory } from './useHistory.js';
+import { useStreamingUpdate } from './useStreamingUpdate.js';
 export const useGenerate = ({ instructionId })=>{
     // Create a ref to hold the current instructionId
     const instructionIdRef = useRef(instructionId);
@@ -20,66 +20,13 @@ export const useGenerate = ({ instructionId })=>{
     ]);
     const { field, path: pathFromContext } = useFieldProps();
     const editorConfigContext = useEditorConfigContext();
-    const { editor } = editorConfigContext;
-    const { config } = useConfig();
-    const { routes: { api }, serverURL } = config;
     const { setValue } = useField({
         path: pathFromContext ?? ''
     });
     const { set: setHistory } = useHistory();
-    // Async job UI state
-    const [jobStatus, setJobStatus] = useState(undefined);
-    const [jobProgress, setJobProgress] = useState(0);
-    const [isJobActive, setIsJobActive] = useState(false);
     const { getData } = useForm();
-    const { id: documentId, collectionSlug } = useDocumentInfo();
+    const { id: documentId } = useDocumentInfo();
     const localFromContext = useLocale();
-    // Reuse config from above instead of calling useConfig again
-    const { collections } = config;
-    const collection = collections.find((collection)=>collection.slug === PLUGIN_INSTRUCTIONS_TABLE);
-    const { custom: { [PLUGIN_NAME]: { editorConfig = {} } = {} } = {} } = collection?.admin ?? {};
-    const { schema: editorSchema = {} } = editorConfig;
-    const memoizedValidator = useMemo(()=>{
-        return editorSchemaValidator(editorSchema);
-    }, [
-        editorSchema
-    ]);
-    const memoizedSchema = useMemo(()=>jsonSchema(editorSchema, {
-            validate: (value)=>{
-                const isValid = memoizedValidator(value);
-                if (isValid) {
-                    return {
-                        success: true,
-                        value
-                    };
-                } else {
-                    return {
-                        error: new Error('Invalid schema'),
-                        success: false
-                    };
-                }
-            }
-        }), [
-        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)=>{
@@ -90,8 +37,8 @@ export const useGenerate = ({ instructionId })=>{
             if (result.object && field) {
                 if (field.type === 'richText') {
                     setHistory(result.object);
-                    setValue(result.object);
-                } else if ('name' in field) {
+                    setSafeLexicalState(result.object, editor);
+                } else if ('name' in field && result.object[field.name]) {
                     setHistory(result.object[field.name]);
                     setValue(result.object[field.name]);
                 }
@@ -99,25 +46,23 @@ export const useGenerate = ({ instructionId })=>{
                 console.log('onFinish: result, field ', result, field);
             }
         },
-        schema: activeSchema
+        schema: jsonSchema({
+            type: 'object',
+            additionalProperties: true,
+            properties: {}
+        })
     });
-    useEffect(()=>{
-        if (!object) {
-            return;
-        }
-        requestAnimationFrame(()=>{
-            if (field?.type === 'richText') {
-                setSafeLexicalState(object, editor);
-            } else if (field && 'name' in field && object[field.name]) {
-                setValue(object[field.name]);
-            }
-        });
-    }, [
-        object,
+    const { editor } = editorConfigContext;
+    // Hook: Handle high-frequency streaming updates
+    useStreamingUpdate({
         editor,
-        field,
-        setValue
-    ]);
+        isLoading: loadingObject,
+        object
+    });
+    // Hook 2: Handle Upload generation and polling
+    const { generateUpload, isJobActive, jobProgress, jobStatus } = useGenerateUpload({
+        instructionIdRef
+    });
     const streamObject = useCallback(({ action = 'Compose', params })=>{
         const doc = getData();
         const currentInstructionId = instructionIdRef.current;
@@ -138,103 +83,10 @@ export const useGenerate = ({ instructionId })=>{
     }, [
         localFromContext?.code,
         instructionIdRef,
-        documentId
-    ]);
-    const generateUpload = useCallback(async ()=>{
-        const doc = getData();
-        const currentInstructionId = instructionIdRef.current;
-        return fetch(`${serverURL}${api}${PLUGIN_API_ENDPOINT_GENERATE_UPLOAD}`, {
-            body: JSON.stringify({
-                collectionSlug: collectionSlug ?? '',
-                doc,
-                documentId,
-                locale: localFromContext?.code,
-                options: {
-                    instructionId: currentInstructionId
-                }
-            }),
-            credentials: 'include',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            method: 'POST'
-        }).then(async (uploadResponse)=>{
-            if (uploadResponse.ok) {
-                const json = await uploadResponse.json();
-                const { job, result } = json || {};
-                if (result) {
-                    // Set the upload ID
-                    setValue(result?.id);
-                    setHistory(result?.id);
-                    // Show toast to prompt user to save
-                    toast.success('Image generated successfully! Click Save to see the preview.');
-                    return uploadResponse;
-                }
-                // Async job: poll AI Jobs collection for status/progress/result_id
-                if (job && job.id) {
-                    setIsJobActive(true);
-                    const cancelled = false;
-                    let attempts = 0;
-                    const maxAttempts = 600 // up to ~10 minutes @ 1s
-                    ;
-                    // Basic in-hook state via closure variables; UI will re-render off fetches below
-                    const poll = async ()=>{
-                        if (cancelled) {
-                            return;
-                        }
-                        try {
-                            const res = await fetch(`${serverURL}${api}/${PLUGIN_AI_JOBS_TABLE}/${job.id}`, {
-                                credentials: 'include'
-                            });
-                            if (res.ok) {
-                                const jobDoc = await res.json();
-                                const { progress, result_id, status } = jobDoc || {};
-                                setJobStatus(status);
-                                setJobProgress(progress ?? 0);
-                                // When result present, set field and finish
-                                if (status === 'completed' && result_id) {
-                                    // Force upload field to refetch by clearing then setting the ID
-                                    setValue(null);
-                                    setTimeout(()=>{
-                                        setValue(result_id);
-                                    }, 0);
-                                    setHistory(result_id);
-                                    setIsJobActive(false);
-                                    return;
-                                }
-                                if (status === 'failed') {
-                                    setIsJobActive(false);
-                                    throw new Error('Video generation failed');
-                                }
-                            }
-                        } catch (e) {
-                        // silent retry
-                        }
-                        attempts += 1;
-                        if (!cancelled && attempts < maxAttempts) {
-                            setTimeout(poll, 1000);
-                        }
-                    };
-                    setTimeout(poll, 1000);
-                    return uploadResponse;
-                }
-                throw new Error('generateUpload: Unexpected response');
-            } else {
-                const { errors = [] } = await uploadResponse.json();
-                const errStr = errors.map((error)=>error.message).join(', ');
-                throw new Error(errStr);
-            }
-        }).catch((error)=>{
-            toast.error(`Failed to generate: ${error.message}`);
-            console.error('Error generating or setting your upload, please set it manually if its saved in your media files.', error);
-        });
-    }, [
-        getData,
-        localFromContext?.code,
-        instructionIdRef,
-        setValue,
         documentId,
-        collectionSlug
+        getData,
+        submit,
+        editor
     ]);
     const generate = useCallback(async (options)=>{
         if (field?.type === 'upload') {