@ai-stack/payloadcms/dist/ui/Compose/Compose.js

<p align="center"> <img alt="Payload AI Plugin" src="assets/payload-ai-intro.gif" width="100%" /> </p>

'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 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 /*#__PURE__*/ _jsx(Menu, {
            isLoading: isProcessing || isLoading,
            onClose: close
        });
    }, [
        isProcessing,
        isLoading,
        Menu
    ]);
    const memoizedPopup = useMemo(()=>{
        return /*#__PURE__*/ _jsx(Popup, {
            button: /*#__PURE__*/ _jsx(PluginIcon, {
                isLoading: isProcessing || isLoading
            }),
            render: popupRender,
            verticalAlign: "bottom"
        });
    }, [
        popupRender,
        isProcessing,
        isLoading
    ]);
    return /*#__PURE__*/ _jsxs("label", {
        className: `payloadai-compose__actions ${styles.actions}`,
        onClick: (e)=>e.preventDefault(),
        role: "presentation",
        children: [
            /*#__PURE__*/ _jsx(DocumentDrawer, {
                onSave: ()=>{
                    closeDrawer();
                }
            }),
            memoizedPopup,
            /*#__PURE__*/ _jsx(ActiveComponent, {
                isLoading: isProcessing || isLoading,
                stop: stop
            }),
            /*#__PURE__*/ _jsx(UndoRedoActions, {
                onChange: (val)=>{
                    setValue(val);
                    setIfValueIsLexicalState(val);
                }
            })
        ]
    });
};

//# sourceMappingURL=Compose.js.map