@uipath/apollo-wind 2.22.0 → 2.24.0

package/dist/components/ui/prompt-editor/prompt-editor.cjs

@@ -0,0 +1,402 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PromptEditor: ()=>PromptEditor
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const LexicalComposer_namespaceObject = require("@lexical/react/LexicalComposer");
+const LexicalContentEditable_namespaceObject = require("@lexical/react/LexicalContentEditable");
+const LexicalErrorBoundary_namespaceObject = require("@lexical/react/LexicalErrorBoundary");
+const LexicalHistoryPlugin_namespaceObject = require("@lexical/react/LexicalHistoryPlugin");
+const LexicalOnChangePlugin_namespaceObject = require("@lexical/react/LexicalOnChangePlugin");
+const LexicalPlainTextPlugin_namespaceObject = require("@lexical/react/LexicalPlainTextPlugin");
+const external_lexical_namespaceObject = require("lexical");
+const external_react_namespaceObject = require("react");
+const external_tooltip_cjs_namespaceObject = require("../tooltip.cjs");
+const EditorToolbar_cjs_namespaceObject = require("./components/EditorToolbar.cjs");
+const MarkdownPreview_cjs_namespaceObject = require("./components/MarkdownPreview.cjs");
+const index_cjs_namespaceObject = require("./nodes/index.cjs");
+const AutocompletePlugin_cjs_namespaceObject = require("./plugins/AutocompletePlugin.cjs");
+const CopyPastePlugin_cjs_namespaceObject = require("./plugins/CopyPastePlugin.cjs");
+const EditorRefPlugin_cjs_namespaceObject = require("./plugins/EditorRefPlugin.cjs");
+const MultilinePlugin_cjs_namespaceObject = require("./plugins/MultilinePlugin.cjs");
+const NodeSelectionFixPlugin_cjs_namespaceObject = require("./plugins/NodeSelectionFixPlugin.cjs");
+const RenameTokensPlugin_cjs_namespaceObject = require("./plugins/RenameTokensPlugin.cjs");
+const ToolbarActionsPlugin_cjs_namespaceObject = require("./plugins/ToolbarActionsPlugin.cjs");
+const ValidateTokensPlugin_cjs_namespaceObject = require("./plugins/ValidateTokensPlugin.cjs");
+const ValueSyncPlugin_cjs_namespaceObject = require("./plugins/ValueSyncPlugin.cjs");
+const VariableDropPlugin_cjs_namespaceObject = require("./plugins/VariableDropPlugin.cjs");
+const external_utils_index_cjs_namespaceObject = require("./utils/index.cjs");
+const DEFAULT_MIN_ROWS = 4;
+const DEFAULT_MAX_ROWS = 20;
+const LINE_HEIGHT = 20;
+const EMPTY_AUTOCOMPLETE_OPTIONS = [];
+const EMPTY_TOKENS = [];
+const toTokenArray = (v)=>void 0 === v ? void 0 : Array.isArray(v) ? v : EMPTY_TOKENS;
+const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ initialValue, value, onChange, autoCompleteOptions = EMPTY_AUTOCOMPLETE_OPTIONS, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, fillHeight, borderless, mapVarDropToToken, toolbarActionsRef, showToolbar }, ref)=>{
+    const editorRef = (0, external_react_namespaceObject.useRef)(null);
+    const [isEmpty, setIsEmpty] = (0, external_react_namespaceObject.useState)(()=>{
+        const seed = initialValue ?? value;
+        return !seed || 0 === seed.length;
+    });
+    const initializedRef = (0, external_react_namespaceObject.useRef)(false);
+    const onChangeRef = (0, external_react_namespaceObject.useRef)(onChange);
+    const isEmptyRef = (0, external_react_namespaceObject.useRef)(isEmpty);
+    const debounceTimerRef = (0, external_react_namespaceObject.useRef)(null);
+    const pendingTokensRef = (0, external_react_namespaceObject.useRef)(null);
+    const lastEmittedValueRef = (0, external_react_namespaceObject.useRef)(null);
+    const isMountedRef = (0, external_react_namespaceObject.useRef)(true);
+    const isSyncingRef = (0, external_react_namespaceObject.useRef)(false);
+    onChangeRef.current = onChange;
+    isEmptyRef.current = isEmpty;
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>({
+            setTokens: (tokens)=>{
+                if (editorRef.current) editorRef.current.update(()=>{
+                    (0, external_utils_index_cjs_namespaceObject.$setEditorTokensInternal)(tokens);
+                });
+                else onChangeRef.current?.(tokens);
+            },
+            insertAutocompleteTrigger: ()=>{
+                const editor = editorRef.current;
+                if (!editor) return;
+                editor.focus();
+                editor.update(()=>{
+                    const selection = (0, external_lexical_namespaceObject.$getSelection)();
+                    if ((0, external_lexical_namespaceObject.$isRangeSelection)(selection)) selection.insertRawText('$');
+                });
+            },
+            insertVariableToken: (option)=>{
+                const editor = editorRef.current;
+                if (!editor) return;
+                editor.focus();
+                editor.update(()=>{
+                    (0, external_utils_index_cjs_namespaceObject.$insertTokenAtCursor)(option);
+                });
+            }
+        }), []);
+    const contentEditableStyle = (0, external_react_namespaceObject.useMemo)(()=>{
+        const verticalPadding = 8;
+        const textColor = borderless ? 'inherit' : 'var(--color-foreground)';
+        const base = {
+            width: '100%',
+            outline: 'none',
+            userSelect: 'text',
+            boxSizing: 'border-box',
+            padding: '8px 12px',
+            fontFamily: "'Noto Sans', sans-serif",
+            fontSize: '14px',
+            lineHeight: `${LINE_HEIGHT}px`,
+            color: textColor
+        };
+        if (!multiline) return {
+            ...base,
+            height: '36px',
+            maxHeight: '36px',
+            overflowX: 'auto',
+            overflowY: 'hidden',
+            whiteSpace: 'nowrap'
+        };
+        const effectiveMinRows = Math.min(minRows, maxRows);
+        const minHeight = effectiveMinRows * LINE_HEIGHT + 2 * verticalPadding;
+        const maxHeight = maxRows * LINE_HEIGHT + 2 * verticalPadding;
+        return {
+            ...base,
+            minHeight: `${minHeight}px`,
+            ...fillHeight ? {
+                flex: 1
+            } : {
+                maxHeight: `${maxHeight}px`
+            },
+            overflowY: 'auto'
+        };
+    }, [
+        multiline,
+        minRows,
+        maxRows,
+        fillHeight,
+        borderless
+    ]);
+    const handleEditorRef = (0, external_react_namespaceObject.useCallback)((editor)=>{
+        editorRef.current = editor;
+    }, []);
+    const handleChange = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (!editorRef.current) return;
+        editorRef.current.getEditorState().read(()=>{
+            const tokens = (0, external_utils_index_cjs_namespaceObject.$getEditorTokensInternal)();
+            const newIsEmpty = 0 === tokens.length || 1 === tokens.length && 'text' === tokens[0].type && '' === tokens[0].value;
+            if (newIsEmpty !== isEmptyRef.current) setIsEmpty(newIsEmpty);
+            if (!isSyncingRef.current) pendingTokensRef.current = tokens;
+        });
+        if (isSyncingRef.current || !onChangeRef.current) return;
+        if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(()=>{
+            if (!isMountedRef.current || !pendingTokensRef.current || !onChangeRef.current || !editorRef.current || isSyncingRef.current) return;
+            lastEmittedValueRef.current = pendingTokensRef.current;
+            onChangeRef.current(pendingTokensRef.current);
+            pendingTokensRef.current = null;
+        }, 0);
+    }, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (value && lastEmittedValueRef.current && !(0, external_utils_index_cjs_namespaceObject.areTokensEqual)(value, lastEmittedValueRef.current)) lastEmittedValueRef.current = null;
+    }, [
+        value
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        isMountedRef.current = true;
+        return ()=>{
+            isMountedRef.current = false;
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+                debounceTimerRef.current = null;
+            }
+            pendingTokensRef.current = null;
+        };
+    }, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const seed = initialValue ?? value;
+        if (!editorRef.current || !seed || initializedRef.current) return;
+        const valueToSet = seed;
+        queueMicrotask(()=>{
+            if (!editorRef.current || initializedRef.current) return;
+            editorRef.current.update(()=>{
+                (0, external_utils_index_cjs_namespaceObject.$setEditorTokensInternal)(valueToSet);
+                setIsEmpty(0 === valueToSet.length);
+                initializedRef.current = true;
+            });
+        });
+    }, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!editorRef.current) return;
+        editorRef.current.setEditable(!disabled);
+    }, [
+        disabled
+    ]);
+    const options = Array.isArray(autoCompleteOptions) ? autoCompleteOptions : EMPTY_AUTOCOMPLETE_OPTIONS;
+    const wrapperClassName = borderless ? 'flex flex-col w-full relative' : `prompt-editor-shell flex flex-col w-full relative border bg-background ${showToolbar ? 'border-t-0 rounded-b-md' : 'rounded-md'}`;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: wrapperClassName,
+        style: {
+            fontFamily: "'Noto Sans', sans-serif",
+            fontSize: '14px',
+            lineHeight: '20px',
+            ...fillHeight ? {
+                flex: 1,
+                minHeight: 0
+            } : {}
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("style", {
+                children: `
+          .prompt-editor-paragraph { padding: 0; margin: 0; }
+          ${borderless ? '' : '.prompt-editor-shell:focus-within { border-color: var(--color-ring); box-shadow: 0 0 0 1px var(--color-ring); }'}
+          .prompt-editor-root *::selection { background-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
+        `
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "prompt-editor-root",
+                style: {
+                    position: 'relative',
+                    ...fillHeight ? {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        minHeight: 0
+                    } : {}
+                },
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalPlainTextPlugin_namespaceObject.PlainTextPlugin, {
+                        contentEditable: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalContentEditable_namespaceObject.ContentEditable, {
+                            style: contentEditableStyle,
+                            ariaLabel: ariaLabel
+                        }),
+                        placeholder: null,
+                        ErrorBoundary: LexicalErrorBoundary_namespaceObject.LexicalErrorBoundary
+                    }),
+                    placeholder && isEmpty && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        style: {
+                            position: 'absolute',
+                            top: '8px',
+                            left: '12px',
+                            right: '12px',
+                            pointerEvents: 'none',
+                            userSelect: 'none',
+                            fontFamily: "'Noto Sans', sans-serif",
+                            fontSize: '14px',
+                            lineHeight: '20px',
+                            ...multiline ? {} : {
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis'
+                            }
+                        },
+                        className: "text-muted-foreground/60",
+                        children: placeholder
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalHistoryPlugin_namespaceObject.HistoryPlugin, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NodeSelectionFixPlugin_cjs_namespaceObject.NodeSelectionFixPlugin, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CopyPastePlugin_cjs_namespaceObject.CopyPastePlugin, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorRefPlugin_cjs_namespaceObject.EditorRefPlugin, {
+                onRef: handleEditorRef
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ValueSyncPlugin_cjs_namespaceObject.ValueSyncPlugin, {
+                value: value,
+                editorRef: editorRef,
+                lastEmittedValueRef: lastEmittedValueRef,
+                isSyncingRef: isSyncingRef
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MultilinePlugin_cjs_namespaceObject.MultilinePlugin, {
+                multiline: multiline
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalOnChangePlugin_namespaceObject.OnChangePlugin, {
+                ignoreSelectionChange: true,
+                onChange: handleChange
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarActionsPlugin_cjs_namespaceObject.ToolbarActionsPlugin, {
+                actionsRef: toolbarActionsRef
+            }),
+            options.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AutocompletePlugin_cjs_namespaceObject.AutocompletePlugin, {
+                options: options
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ValidateTokensPlugin_cjs_namespaceObject.ValidateTokensPlugin, {
+                options: options
+            }),
+            options.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(RenameTokensPlugin_cjs_namespaceObject.RenameTokensPlugin, {
+                options: options,
+                onChange: onChange
+            }),
+            mapVarDropToToken && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VariableDropPlugin_cjs_namespaceObject.VariableDropPlugin, {
+                mapVarDropToToken: mapVarDropToToken,
+                disabled: disabled
+            })
+        ]
+    });
+});
+EditorInner.displayName = 'PromptEditorInner';
+const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar = false, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, mapVarDropToToken })=>{
+    const value = toTokenArray(rawValue);
+    const initialValue = toTokenArray(rawInitialValue);
+    const [internalMode, setInternalMode] = (0, external_react_namespaceObject.useState)('edit');
+    const mode = controlledMode ?? internalMode;
+    const toolbarActionsRef = (0, external_react_namespaceObject.useRef)(null);
+    const [uncontrolledPreviewTokens, setUncontrolledPreviewTokens] = (0, external_react_namespaceObject.useState)(initialValue ?? []);
+    const handleModeChange = (0, external_react_namespaceObject.useCallback)((newMode)=>{
+        if (onModeChange) onModeChange(newMode);
+        else setInternalMode(newMode);
+    }, [
+        onModeChange
+    ]);
+    const initialConfig = (0, external_react_namespaceObject.useMemo)(()=>({
+            namespace: 'PromptEditor',
+            theme: {
+                paragraph: 'prompt-editor-paragraph'
+            },
+            onError: (error)=>console.error('PromptEditor error:', error),
+            nodes: [
+                index_cjs_namespaceObject.InputTokenNode,
+                index_cjs_namespaceObject.OutputTokenNode,
+                index_cjs_namespaceObject.StateTokenNode,
+                index_cjs_namespaceObject.ResourceTokenNode
+            ]
+        }), []);
+    const isControlled = void 0 !== value;
+    const previewTokens = isControlled ? value : uncontrolledPreviewTokens;
+    const handleEditorChange = (0, external_react_namespaceObject.useCallback)((tokens)=>{
+        if (!isControlled) setUncontrolledPreviewTokens(tokens);
+        onChange?.(tokens);
+    }, [
+        isControlled,
+        onChange
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                ...fillHeight ? {
+                    flex: 1,
+                    minHeight: 0
+                } : {}
+            },
+            children: [
+                showToolbar && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorToolbar_cjs_namespaceObject.EditorToolbar, {
+                    mode: mode,
+                    disabled: disabled,
+                    actionsRef: toolbarActionsRef,
+                    onModeChange: handleModeChange,
+                    onFullscreen: onFullscreen
+                }),
+                'preview' === mode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: borderless ? void 0 : `border bg-background ${showToolbar ? 'border-t-0 rounded-b-md' : 'rounded-md'}`,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MarkdownPreview_cjs_namespaceObject.MarkdownPreview, {
+                        tokens: previewTokens,
+                        minRows: minRows
+                    })
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    style: {
+                        display: 'preview' === mode ? 'none' : 'flex',
+                        flexDirection: 'column',
+                        ...fillHeight ? {
+                            flex: 1,
+                            minHeight: 0
+                        } : {}
+                    },
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalComposer_namespaceObject.LexicalComposer, {
+                        initialConfig: initialConfig,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorInner, {
+                            ref: editorRef,
+                            autoCompleteOptions: autoCompleteOptions,
+                            disabled: disabled,
+                            ariaLabel: ariaLabel,
+                            initialValue: initialValue,
+                            maxRows: maxRows,
+                            minRows: minRows,
+                            multiline: multiline,
+                            placeholder: placeholder,
+                            fillHeight: fillHeight,
+                            borderless: borderless,
+                            mapVarDropToToken: mapVarDropToToken,
+                            showToolbar: showToolbar,
+                            toolbarActionsRef: toolbarActionsRef,
+                            value: value,
+                            onChange: handleEditorChange
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+exports.PromptEditor = __webpack_exports__.PromptEditor;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PromptEditor"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/prompt-editor/prompt-editor.d.ts

@@ -0,0 +1,35 @@
+import type { PromptEditorAutoCompleteOption, PromptEditorMode, PromptEditorToken } from './types';
+export interface PromptEditorRef {
+    setTokens: (tokens: PromptEditorToken[]) => void;
+    /** Focus the editor and insert the `$` trigger character to open the autocomplete menu. */
+    insertAutocompleteTrigger: () => void;
+    /** Focus the editor and insert a variable token pill at the current cursor position. */
+    insertVariableToken: (option: PromptEditorAutoCompleteOption) => void;
+}
+export interface PromptEditorProps {
+    value?: PromptEditorToken[];
+    initialValue?: PromptEditorToken[];
+    onChange?: (value: PromptEditorToken[]) => void;
+    autoCompleteOptions?: PromptEditorAutoCompleteOption[];
+    multiline?: boolean;
+    minRows?: number;
+    maxRows?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    ariaLabel?: string;
+    showToolbar?: boolean;
+    mode?: PromptEditorMode;
+    onModeChange?: (mode: PromptEditorMode) => void;
+    onFullscreen?: () => void;
+    editorRef?: React.RefObject<PromptEditorRef | null>;
+    fillHeight?: boolean;
+    /** Drop the editor's own border/background/rounding so a parent can provide the field chrome. */
+    borderless?: boolean;
+    /**
+     * Enable variable drag-drop: map a path dropped onto the editor (see `VARIABLE_DRAG_MIME`) to the
+     * token to insert at the drop point. The drag *source* is the consumer's (it sets the path on
+     * `dataTransfer`); omit this prop to disable drop handling entirely.
+     */
+    mapVarDropToToken?: (insertPath: string) => PromptEditorAutoCompleteOption;
+}
+export declare const PromptEditor: ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline, minRows, maxRows, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, mapVarDropToToken, }: PromptEditorProps) => import("react/jsx-runtime").JSX.Element;