@uipath/apollo-wind 2.23.0 → 2.24.0

package/dist/components/ui/prompt-editor/components/EditorToolbar.js

@@ -0,0 +1,122 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Bold, Italic, List, ListOrdered, Maximize2, Strikethrough } from "lucide-react";
+import { cn } from "../../../../lib/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../tooltip.js";
+const ToolbarButton = ({ icon: Icon, label, disabled, onClick })=>/*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "aria-label": label,
+                    disabled: disabled,
+                    onClick: onClick,
+                    className: cn('inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground', 'hover:bg-accent hover:text-accent-foreground', 'disabled:opacity-50 disabled:pointer-events-none'),
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        className: "h-3.5 w-3.5"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                side: "bottom",
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "text-xs",
+                    children: label
+                })
+            })
+        ]
+    });
+const ToolbarSeparator = ()=>/*#__PURE__*/ jsx("span", {
+        "aria-hidden": true,
+        className: "mx-1 h-4 w-px bg-border/60"
+    });
+const EditorToolbar = ({ mode, onModeChange, disabled, actionsRef, onFullscreen })=>{
+    const isEditMode = 'edit' === mode;
+    const handleFormat = (actionName)=>()=>{
+            if (!disabled && isEditMode) {
+                const fn = actionsRef?.current?.[actionName];
+                if ('function' == typeof fn) fn();
+            }
+        };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "relative flex items-center justify-between gap-1 overflow-hidden rounded-t-md border border-b-0 bg-background px-2 py-1",
+        "data-testid": "editor-toolbar",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "aria-hidden": true,
+                "data-testid": "editor-toolbar-separator",
+                className: "pointer-events-none absolute bottom-0 left-0 h-px w-full bg-border/40"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex items-center gap-1 shrink-0",
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "flex items-center rounded-md bg-muted p-0.5",
+                    children: [
+                        /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: cn('rounded px-2 py-0.5 text-[11px] font-semibold transition-colors', 'edit' === mode ? 'bg-primary/20 text-primary' : 'text-foreground hover:bg-accent'),
+                            disabled: disabled,
+                            onClick: ()=>onModeChange('edit'),
+                            children: "Edit"
+                        }),
+                        /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: cn('rounded px-2 py-0.5 text-[11px] font-semibold transition-colors', 'preview' === mode ? 'bg-primary/20 text-primary' : 'text-foreground hover:bg-accent'),
+                            disabled: disabled,
+                            onClick: ()=>onModeChange('preview'),
+                            children: "Preview"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-0.5 overflow-hidden",
+                children: [
+                    /*#__PURE__*/ jsx(ToolbarButton, {
+                        icon: Bold,
+                        label: "Bold",
+                        disabled: disabled || !isEditMode,
+                        onClick: handleFormat('formatBold')
+                    }),
+                    /*#__PURE__*/ jsx(ToolbarButton, {
+                        icon: Italic,
+                        label: "Italic",
+                        disabled: disabled || !isEditMode,
+                        onClick: handleFormat('formatItalic')
+                    }),
+                    /*#__PURE__*/ jsx(ToolbarButton, {
+                        icon: Strikethrough,
+                        label: "Strikethrough",
+                        disabled: disabled || !isEditMode,
+                        onClick: handleFormat('formatStrikethrough')
+                    }),
+                    /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+                    /*#__PURE__*/ jsx(ToolbarButton, {
+                        icon: ListOrdered,
+                        label: "Numbered List",
+                        disabled: disabled || !isEditMode,
+                        onClick: handleFormat('formatNumberedList')
+                    }),
+                    /*#__PURE__*/ jsx(ToolbarButton, {
+                        icon: List,
+                        label: "Bulleted List",
+                        disabled: disabled || !isEditMode,
+                        onClick: handleFormat('formatBulletedList')
+                    }),
+                    onFullscreen && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+                            /*#__PURE__*/ jsx(ToolbarButton, {
+                                icon: Maximize2,
+                                label: "Expand",
+                                disabled: disabled,
+                                onClick: onFullscreen
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { EditorToolbar };

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

@@ -0,0 +1,205 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __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__, {
+    MarkdownPreview: ()=>MarkdownPreview
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_dompurify_namespaceObject = require("dompurify");
+var external_dompurify_default = /*#__PURE__*/ __webpack_require__.n(external_dompurify_namespaceObject);
+const external_marked_namespaceObject = require("marked");
+const external_react_namespaceObject = require("react");
+const external_token_icon_markup_cjs_namespaceObject = require("./token-icon-markup.cjs");
+const marked = new external_marked_namespaceObject.Marked({
+    async: false,
+    gfm: true,
+    breaks: true
+});
+const MARKDOWN_PREVIEW_STYLES = `
+.prompt-editor-preview { color: var(--color-foreground); }
+.prompt-editor-preview-empty { color: var(--color-muted-foreground); }
+.prompt-editor-preview h1 { font-size: 1.5em; font-weight: 700; margin: 0.5em 0 0.25em; line-height: 1.3; }
+.prompt-editor-preview h2 { font-size: 1.25em; font-weight: 700; margin: 0.5em 0 0.25em; line-height: 1.3; }
+.prompt-editor-preview h3 { font-size: 1.1em; font-weight: 600; margin: 0.4em 0 0.2em; line-height: 1.3; }
+.prompt-editor-preview h4, .prompt-editor-preview h5, .prompt-editor-preview h6 { font-size: 1em; font-weight: 600; margin: 0.4em 0 0.2em; line-height: 1.3; }
+.prompt-editor-preview p { margin: 0.25em 0; }
+.prompt-editor-preview code { font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.875em; padding: 0.15em 0.4em; border-radius: 4px; background-color: var(--color-muted); color: var(--color-foreground); }
+.prompt-editor-preview pre { margin: 0.5em 0; padding: 0.75em 1em; border-radius: 6px; overflow-x: auto; background-color: var(--color-muted); color: var(--color-foreground); }
+.prompt-editor-preview pre code { padding: 0; background: none; font-size: 0.85em; }
+.prompt-editor-preview blockquote { margin: 0.5em 0; padding: 0.25em 0.75em; border-left: 3px solid var(--color-border); color: var(--color-muted-foreground); }
+.prompt-editor-preview ul, .prompt-editor-preview ol { margin: 0.25em 0; padding-left: 1.5em; }
+.prompt-editor-preview ul { list-style-type: disc; }
+.prompt-editor-preview ol { list-style-type: decimal; }
+.prompt-editor-preview li { margin: 0.1em 0; }
+.prompt-editor-preview a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
+.prompt-editor-preview a:hover { opacity: 0.8; }
+.prompt-editor-preview hr { margin: 0.75em 0; border: none; border-top: 1px solid var(--color-border); }
+.prompt-editor-preview table { border-collapse: collapse; margin: 0.5em 0; width: 100%; }
+.prompt-editor-preview th, .prompt-editor-preview td { border: 1px solid var(--color-border); padding: 0.35em 0.75em; text-align: left; }
+.prompt-editor-preview th { font-weight: 600; background-color: var(--color-muted); }
+.prompt-editor-preview strong { font-weight: 700; }
+.prompt-editor-preview em { font-style: italic; }
+.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: var(--color-primary-lighter); color: var(--color-foreground); }
+.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: var(--color-primary); width: 14px; height: 14px; }
+`;
+const PURIFY_CONFIG = {
+    ALLOWED_TAGS: [
+        'p',
+        'br',
+        'span',
+        'strong',
+        'em',
+        'b',
+        'i',
+        'u',
+        's',
+        'del',
+        'ins',
+        'mark',
+        'sub',
+        'sup',
+        'small',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'ul',
+        'ol',
+        'li',
+        'code',
+        'pre',
+        'blockquote',
+        'hr',
+        'div',
+        'a',
+        'table',
+        'thead',
+        'tbody',
+        'tr',
+        'th',
+        'td',
+        'svg',
+        'path',
+        'line',
+        'polyline',
+        'polygon',
+        'circle',
+        'ellipse',
+        'rect',
+        'g'
+    ],
+    ALLOWED_ATTR: [
+        'class',
+        'href',
+        'rel',
+        'viewBox',
+        'xmlns',
+        'width',
+        'height',
+        'fill',
+        'stroke',
+        'stroke-width',
+        'stroke-linecap',
+        'stroke-linejoin',
+        'fill-rule',
+        'clip-rule',
+        'd',
+        'x1',
+        'x2',
+        'y1',
+        'y2',
+        'points',
+        'cx',
+        'cy',
+        'r',
+        'x',
+        'y',
+        'rx',
+        'ry',
+        'colspan',
+        'rowspan'
+    ]
+};
+const escapeHtml = (str)=>str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const tokensToMarkdownWithPills = (tokens)=>{
+    let md = '';
+    for (const token of tokens)if ('text' === token.type) md += token.value;
+    else {
+        const iconSvg = (0, external_token_icon_markup_cjs_namespaceObject.buildTokenIconSvgMarkup)(token.type);
+        md += `<span class="token-pill">${iconSvg}${escapeHtml(token.value)}</span>`;
+    }
+    return md;
+};
+const LINE_HEIGHT = 20;
+const VERTICAL_PADDING = 8;
+const EMPTY_MESSAGE = 'Nothing to preview';
+const MarkdownPreview = ({ tokens, minRows = 4 })=>{
+    const html = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (0 === tokens.length) return `<p class="prompt-editor-preview-empty">${escapeHtml(EMPTY_MESSAGE)}</p>`;
+        const md = tokensToMarkdownWithPills(tokens);
+        const rawHtml = marked.parse(md);
+        return external_dompurify_default().sanitize(rawHtml, PURIFY_CONFIG);
+    }, [
+        tokens
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("style", {
+                children: MARKDOWN_PREVIEW_STYLES
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "prompt-editor-preview",
+                style: {
+                    padding: '8px 12px',
+                    minHeight: `${minRows * LINE_HEIGHT + 2 * VERTICAL_PADDING}px`,
+                    fontFamily: "'Noto Sans', sans-serif",
+                    fontSize: '14px',
+                    lineHeight: '20px'
+                },
+                dangerouslySetInnerHTML: {
+                    __html: html
+                }
+            })
+        ]
+    });
+};
+exports.MarkdownPreview = __webpack_exports__.MarkdownPreview;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "MarkdownPreview"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,14 @@
+import { type PromptEditorToken } from '../types';
+export interface MarkdownPreviewProps {
+    tokens: PromptEditorToken[];
+    minRows?: number;
+}
+/**
+ * Renders the prompt tokens as sanitized markdown for preview mode.
+ *
+ * Preview is **visual-only**: every variable token renders as a pill regardless of whether its path
+ * still exists in `autoCompleteOptions`. Unlike edit mode — where `ValidateTokensPlugin` flags
+ * stale/unknown tokens as invalid — preview does not receive the option set and so does not reflect
+ * token validity. Switch to edit mode to see validation state.
+ */
+export declare const MarkdownPreview: ({ tokens, minRows }: MarkdownPreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/prompt-editor/components/MarkdownPreview.js

@@ -0,0 +1,161 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import dompurify from "dompurify";
+import { Marked } from "marked";
+import { useMemo } from "react";
+import { buildTokenIconSvgMarkup } from "./token-icon-markup.js";
+const marked = new Marked({
+    async: false,
+    gfm: true,
+    breaks: true
+});
+const MARKDOWN_PREVIEW_STYLES = `
+.prompt-editor-preview { color: var(--color-foreground); }
+.prompt-editor-preview-empty { color: var(--color-muted-foreground); }
+.prompt-editor-preview h1 { font-size: 1.5em; font-weight: 700; margin: 0.5em 0 0.25em; line-height: 1.3; }
+.prompt-editor-preview h2 { font-size: 1.25em; font-weight: 700; margin: 0.5em 0 0.25em; line-height: 1.3; }
+.prompt-editor-preview h3 { font-size: 1.1em; font-weight: 600; margin: 0.4em 0 0.2em; line-height: 1.3; }
+.prompt-editor-preview h4, .prompt-editor-preview h5, .prompt-editor-preview h6 { font-size: 1em; font-weight: 600; margin: 0.4em 0 0.2em; line-height: 1.3; }
+.prompt-editor-preview p { margin: 0.25em 0; }
+.prompt-editor-preview code { font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.875em; padding: 0.15em 0.4em; border-radius: 4px; background-color: var(--color-muted); color: var(--color-foreground); }
+.prompt-editor-preview pre { margin: 0.5em 0; padding: 0.75em 1em; border-radius: 6px; overflow-x: auto; background-color: var(--color-muted); color: var(--color-foreground); }
+.prompt-editor-preview pre code { padding: 0; background: none; font-size: 0.85em; }
+.prompt-editor-preview blockquote { margin: 0.5em 0; padding: 0.25em 0.75em; border-left: 3px solid var(--color-border); color: var(--color-muted-foreground); }
+.prompt-editor-preview ul, .prompt-editor-preview ol { margin: 0.25em 0; padding-left: 1.5em; }
+.prompt-editor-preview ul { list-style-type: disc; }
+.prompt-editor-preview ol { list-style-type: decimal; }
+.prompt-editor-preview li { margin: 0.1em 0; }
+.prompt-editor-preview a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
+.prompt-editor-preview a:hover { opacity: 0.8; }
+.prompt-editor-preview hr { margin: 0.75em 0; border: none; border-top: 1px solid var(--color-border); }
+.prompt-editor-preview table { border-collapse: collapse; margin: 0.5em 0; width: 100%; }
+.prompt-editor-preview th, .prompt-editor-preview td { border: 1px solid var(--color-border); padding: 0.35em 0.75em; text-align: left; }
+.prompt-editor-preview th { font-weight: 600; background-color: var(--color-muted); }
+.prompt-editor-preview strong { font-weight: 700; }
+.prompt-editor-preview em { font-style: italic; }
+.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: var(--color-primary-lighter); color: var(--color-foreground); }
+.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: var(--color-primary); width: 14px; height: 14px; }
+`;
+const PURIFY_CONFIG = {
+    ALLOWED_TAGS: [
+        'p',
+        'br',
+        'span',
+        'strong',
+        'em',
+        'b',
+        'i',
+        'u',
+        's',
+        'del',
+        'ins',
+        'mark',
+        'sub',
+        'sup',
+        'small',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'ul',
+        'ol',
+        'li',
+        'code',
+        'pre',
+        'blockquote',
+        'hr',
+        'div',
+        'a',
+        'table',
+        'thead',
+        'tbody',
+        'tr',
+        'th',
+        'td',
+        'svg',
+        'path',
+        'line',
+        'polyline',
+        'polygon',
+        'circle',
+        'ellipse',
+        'rect',
+        'g'
+    ],
+    ALLOWED_ATTR: [
+        'class',
+        'href',
+        'rel',
+        'viewBox',
+        'xmlns',
+        'width',
+        'height',
+        'fill',
+        'stroke',
+        'stroke-width',
+        'stroke-linecap',
+        'stroke-linejoin',
+        'fill-rule',
+        'clip-rule',
+        'd',
+        'x1',
+        'x2',
+        'y1',
+        'y2',
+        'points',
+        'cx',
+        'cy',
+        'r',
+        'x',
+        'y',
+        'rx',
+        'ry',
+        'colspan',
+        'rowspan'
+    ]
+};
+const escapeHtml = (str)=>str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const tokensToMarkdownWithPills = (tokens)=>{
+    let md = '';
+    for (const token of tokens)if ('text' === token.type) md += token.value;
+    else {
+        const iconSvg = buildTokenIconSvgMarkup(token.type);
+        md += `<span class="token-pill">${iconSvg}${escapeHtml(token.value)}</span>`;
+    }
+    return md;
+};
+const LINE_HEIGHT = 20;
+const VERTICAL_PADDING = 8;
+const EMPTY_MESSAGE = 'Nothing to preview';
+const MarkdownPreview = ({ tokens, minRows = 4 })=>{
+    const html = useMemo(()=>{
+        if (0 === tokens.length) return `<p class="prompt-editor-preview-empty">${escapeHtml(EMPTY_MESSAGE)}</p>`;
+        const md = tokensToMarkdownWithPills(tokens);
+        const rawHtml = marked.parse(md);
+        return dompurify.sanitize(rawHtml, PURIFY_CONFIG);
+    }, [
+        tokens
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("style", {
+                children: MARKDOWN_PREVIEW_STYLES
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "prompt-editor-preview",
+                style: {
+                    padding: '8px 12px',
+                    minHeight: `${minRows * LINE_HEIGHT + 2 * VERTICAL_PADDING}px`,
+                    fontFamily: "'Noto Sans', sans-serif",
+                    fontSize: '14px',
+                    lineHeight: '20px'
+                },
+                dangerouslySetInnerHTML: {
+                    __html: html
+                }
+            })
+        ]
+    });
+};
+export { MarkdownPreview };