@uipath/apollo-wind 2.46.0 → 2.47.0

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

@@ -2,16 +2,18 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Bold, Italic, List, ListOrdered, Maximize2, Strikethrough } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../tooltip.js";
 import { cn } from "../../../../lib/index.js";
-const ToolbarButton = ({ icon: Icon, label, disabled, onClick })=>/*#__PURE__*/ jsxs(Tooltip, {
+import { DEFAULT_PROMPT_EDITOR_STRINGS } from "../prompt-editor-config.js";
+const ToolbarButton = ({ icon: Icon, label, disabled, onClick, pressed })=>/*#__PURE__*/ jsxs(Tooltip, {
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ jsx("button", {
                     type: "button",
                     "aria-label": label,
+                    "aria-pressed": pressed,
                     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'),
+                    className: cn('inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded text-muted-foreground', 'hover:bg-accent hover:text-accent-foreground', 'disabled:opacity-50 disabled:pointer-events-none', pressed && 'bg-accent text-accent-foreground'),
                     children: /*#__PURE__*/ jsx(Icon, {
                         className: "h-3.5 w-3.5"
                     })
@@ -30,14 +32,65 @@ const ToolbarSeparator = ()=>/*#__PURE__*/ jsx("span", {
         "aria-hidden": true,
         className: "mx-1 h-4 w-px bg-border/60"
     });
-const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFullscreen })=>{
-    const isEditMode = 'edit' === mode;
+const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFullscreen, showModeToggle = true, trailing, strings = DEFAULT_PROMPT_EDITOR_STRINGS, activeFormats })=>{
+    const isEditMode = !showModeToggle || 'edit' === mode;
     const handleFormat = (actionName)=>()=>{
             if (!disabled && isEditMode) {
                 const fn = actionsRef?.current?.[actionName];
                 if ('function' == typeof fn) fn();
             }
         };
+    const formattingCluster = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: Bold,
+                pressed: activeFormats?.bold,
+                label: strings.bold,
+                disabled: disabled || !isEditMode,
+                onClick: handleFormat('formatBold')
+            }),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: Italic,
+                pressed: activeFormats?.italic,
+                label: strings.italic,
+                disabled: disabled || !isEditMode,
+                onClick: handleFormat('formatItalic')
+            }),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: Strikethrough,
+                pressed: activeFormats?.strikethrough,
+                label: strings.strikethrough,
+                disabled: disabled || !isEditMode,
+                onClick: handleFormat('formatStrikethrough')
+            }),
+            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: ListOrdered,
+                pressed: activeFormats?.orderedList,
+                label: strings.numberedList,
+                disabled: disabled || !isEditMode,
+                onClick: handleFormat('formatNumberedList')
+            }),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: List,
+                pressed: activeFormats?.bulletedList,
+                label: strings.bulletedList,
+                disabled: disabled || !isEditMode,
+                onClick: handleFormat('formatBulletedList')
+            }),
+            onFullscreen && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+                    /*#__PURE__*/ jsx(ToolbarButton, {
+                        icon: Maximize2,
+                        label: strings.expand,
+                        disabled: disabled,
+                        onClick: onFullscreen
+                    })
+                ]
+            })
+        ]
+    });
     return /*#__PURE__*/ jsxs("div", {
         className: cn('relative flex items-center justify-between gap-1 overflow-hidden rounded-t-md border border-b-0 bg-background px-2 py-1 future:rounded-t-xl future:border-0 future:bg-surface-overlay', error && 'border-error ring-1 ring-error/20 future:ring-error/40'),
         "data-testid": "editor-toolbar",
@@ -47,77 +100,57 @@ const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFull
                 "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("fieldset", {
-                    "aria-label": "Editor mode",
-                    className: "m-0 flex items-center rounded-md border-0 bg-muted p-0.5",
-                    children: [
-                        /*#__PURE__*/ jsx("button", {
-                            type: "button",
-                            "aria-pressed": 'edit' === mode,
-                            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",
-                            "aria-pressed": 'preview' === mode,
-                            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",
+            showModeToggle ? /*#__PURE__*/ jsxs(Fragment, {
                 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')
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex items-center gap-1 shrink-0",
+                        children: /*#__PURE__*/ jsxs("fieldset", {
+                            "aria-label": strings.editorModeLabel,
+                            className: "m-0 flex items-center rounded-md border-0 bg-muted p-0.5",
+                            children: [
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    "aria-pressed": 'edit' === mode,
+                                    className: cn('cursor-pointer 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: strings.edit
+                                }),
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    "aria-pressed": 'preview' === mode,
+                                    className: cn('cursor-pointer 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: strings.preview
+                                })
+                            ]
+                        })
                     }),
-                    onFullscreen && /*#__PURE__*/ jsxs(Fragment, {
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-0.5 overflow-hidden",
                         children: [
-                            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
-                            /*#__PURE__*/ jsx(ToolbarButton, {
-                                icon: Maximize2,
-                                label: "Expand",
-                                disabled: disabled,
-                                onClick: onFullscreen
+                            formattingCluster,
+                            trailing && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+                                    trailing
+                                ]
                             })
                         ]
                     })
                 ]
+            }) : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex items-center gap-0.5 overflow-hidden",
+                        children: formattingCluster
+                    }),
+                    trailing && /*#__PURE__*/ jsx("div", {
+                        className: "flex items-center gap-0.5 shrink-0",
+                        children: trailing
+                    })
+                ]
             })
         ]
     });

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

@@ -40,6 +40,7 @@ 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_prompt_editor_config_cjs_namespaceObject = require("../prompt-editor-config.cjs");
 const external_token_icon_markup_cjs_namespaceObject = require("./token-icon-markup.cjs");
 const marked = new external_marked_namespaceObject.Marked({
     async: false,
@@ -154,26 +155,30 @@ const PURIFY_CONFIG = {
     ]
 };
 const escapeHtml = (str)=>str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-const tokensToMarkdownWithPills = (tokens)=>{
+const tokensToMarkdownWithPills = (tokens, previewToken)=>{
     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>`;
+        const override = previewToken?.(token);
+        const iconSvg = override?.iconSvg ?? (0, external_token_icon_markup_cjs_namespaceObject.buildTokenIconSvgMarkup)(token.type);
+        md += `<span class="token-pill">${iconSvg}${escapeHtml(override?.label ?? 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 MarkdownPreview = ({ tokens, minRows = 4, previewToken })=>{
+    const { strings } = (0, external_prompt_editor_config_cjs_namespaceObject.usePromptEditorConfig)();
+    const emptyMessage = strings.nothingToPreview;
     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);
+        if (0 === tokens.length) return `<p class="prompt-editor-preview-empty">${escapeHtml(emptyMessage)}</p>`;
+        const md = tokensToMarkdownWithPills(tokens, previewToken);
         const rawHtml = marked.parse(md);
         return external_dompurify_default().sanitize(rawHtml, PURIFY_CONFIG);
     }, [
-        tokens
+        tokens,
+        previewToken,
+        emptyMessage
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [

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

@@ -1,7 +1,19 @@
 import { type PromptEditorToken } from '../types';
+/** Host override for a variable pill's preview rendering (icon markup and/or label). */
+export interface MarkdownPreviewTokenOverride {
+    /** Raw SVG markup for the leading icon (sanitized through the same DOMPurify allowlist). */
+    iconSvg?: string;
+    /** Label text (HTML-escaped before insertion). Defaults to the token's value. */
+    label?: string;
+}
 export interface MarkdownPreviewProps {
     tokens: PromptEditorToken[];
     minRows?: number;
+    /**
+     * Per-token pill override so preview pills can match the host's edit-mode pills (e.g. flow shows
+     * the variable's TYPE icon and `$`-prefixed path, not the token-role icon / raw value).
+     */
+    previewToken?: (token: PromptEditorToken) => MarkdownPreviewTokenOverride | undefined;
 }
 /**
  * Renders the prompt tokens as sanitized markdown for preview mode.
@@ -11,4 +23,4 @@ export interface MarkdownPreviewProps {
  * 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;
+export declare const MarkdownPreview: ({ tokens, minRows, previewToken }: MarkdownPreviewProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import dompurify from "dompurify";
 import { Marked } from "marked";
 import { useMemo } from "react";
+import { usePromptEditorConfig } from "../prompt-editor-config.js";
 import { buildTokenIconSvgMarkup } from "./token-icon-markup.js";
 const marked = new Marked({
     async: false,
@@ -116,26 +117,30 @@ const PURIFY_CONFIG = {
     ]
 };
 const escapeHtml = (str)=>str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-const tokensToMarkdownWithPills = (tokens)=>{
+const tokensToMarkdownWithPills = (tokens, previewToken)=>{
     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>`;
+        const override = previewToken?.(token);
+        const iconSvg = override?.iconSvg ?? buildTokenIconSvgMarkup(token.type);
+        md += `<span class="token-pill">${iconSvg}${escapeHtml(override?.label ?? 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 MarkdownPreview = ({ tokens, minRows = 4, previewToken })=>{
+    const { strings } = usePromptEditorConfig();
+    const emptyMessage = strings.nothingToPreview;
     const html = useMemo(()=>{
-        if (0 === tokens.length) return `<p class="prompt-editor-preview-empty">${escapeHtml(EMPTY_MESSAGE)}</p>`;
-        const md = tokensToMarkdownWithPills(tokens);
+        if (0 === tokens.length) return `<p class="prompt-editor-preview-empty">${escapeHtml(emptyMessage)}</p>`;
+        const md = tokensToMarkdownWithPills(tokens, previewToken);
         const rawHtml = marked.parse(md);
         return dompurify.sanitize(rawHtml, PURIFY_CONFIG);
     }, [
-        tokens
+        tokens,
+        previewToken,
+        emptyMessage
     ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [

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

@@ -31,8 +31,24 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_react_dom_namespaceObject = require("react-dom");
 const external_command_cjs_namespaceObject = require("../../command.cjs");
+const external_prompt_editor_config_cjs_namespaceObject = require("../prompt-editor-config.cjs");
 const external_types_cjs_namespaceObject = require("../types.cjs");
 const autocomplete_segments_cjs_namespaceObject = require("../utils/autocomplete-segments.cjs");
+const renderInsertFreeForm = (label, path)=>{
+    const [before, after = ''] = label.includes('{path}') ? label.split('{path}', 2) : [
+        `${label} `
+    ];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            before,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "font-medium",
+                children: path
+            }),
+            after
+        ]
+    });
+};
 const MENU_WIDTH = 320;
 const VIEWPORT_MARGIN = 8;
 const OPTION_ICON = {
@@ -49,6 +65,7 @@ function resolvePortalTarget(contextElement) {
 const PromptEditorAutocompleteMenu = ({ open, anchorEl, initialSearch, options, onSelect, onCommitFreeForm, onClose })=>{
     const containerRef = (0, external_react_namespaceObject.useRef)(null);
     const [search, setSearch] = (0, external_react_namespaceObject.useState)(initialSearch);
+    const { strings } = (0, external_prompt_editor_config_cjs_namespaceObject.usePromptEditorConfig)();
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (open) setSearch(initialSearch);
     }, [
@@ -132,13 +149,13 @@ const PromptEditorAutocompleteMenu = ({ open, anchorEl, initialSearch, options,
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandInput, {
                     value: search,
                     onValueChange: setSearch,
-                    placeholder: "Search variables…",
+                    placeholder: strings.searchVariablesPlaceholder,
                     autoFocus: true
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandList, {
                     children: [
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandEmpty, {
-                            children: "No variables found."
+                            children: strings.noVariablesFound
                         }),
                         options.map((option)=>{
                             const Icon = OPTION_ICON[option.type];
@@ -155,7 +172,7 @@ const PromptEditorAutocompleteMenu = ({ open, anchorEl, initialSearch, options,
                                     }),
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                         className: "ml-auto pl-2 text-xs text-muted-foreground",
-                                        children: (0, external_types_cjs_namespaceObject.getPromptEditorTokenTypeLabel)(option.type)
+                                        children: (0, external_types_cjs_namespaceObject.getPromptEditorTokenTypeLabel)(option.type, strings)
                                     })
                                 ]
                             }, `${option.type}:${option.value}`);
@@ -167,15 +184,9 @@ const PromptEditorAutocompleteMenu = ({ open, anchorEl, initialSearch, options,
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Variable, {
                                     className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
                                 }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                     className: "truncate",
-                                    children: [
-                                        "Insert ",
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                            className: "font-medium",
-                                            children: freeFormPath
-                                        })
-                                    ]
+                                    children: renderInsertFreeForm(strings.insertFreeForm, freeFormPath)
                                 })
                             ]
                         })

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

@@ -1,10 +1,26 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Database, Paperclip, SquareFunction, Variable } from "lucide-react";
 import { useEffect, useReducer, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "../../command.js";
+import { usePromptEditorConfig } from "../prompt-editor-config.js";
 import { getPromptEditorTokenTypeLabel } from "../types.js";
 import { VARIABLE_PATH_REGEX } from "../utils/autocomplete-segments.js";
+const renderInsertFreeForm = (label, path)=>{
+    const [before, after = ''] = label.includes('{path}') ? label.split('{path}', 2) : [
+        `${label} `
+    ];
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            before,
+            /*#__PURE__*/ jsx("span", {
+                className: "font-medium",
+                children: path
+            }),
+            after
+        ]
+    });
+};
 const MENU_WIDTH = 320;
 const VIEWPORT_MARGIN = 8;
 const OPTION_ICON = {
@@ -21,6 +37,7 @@ function resolvePortalTarget(contextElement) {
 const PromptEditorAutocompleteMenu = ({ open, anchorEl, initialSearch, options, onSelect, onCommitFreeForm, onClose })=>{
     const containerRef = useRef(null);
     const [search, setSearch] = useState(initialSearch);
+    const { strings } = usePromptEditorConfig();
     useEffect(()=>{
         if (open) setSearch(initialSearch);
     }, [
@@ -104,13 +121,13 @@ const PromptEditorAutocompleteMenu = ({ open, anchorEl, initialSearch, options,
                 /*#__PURE__*/ jsx(CommandInput, {
                     value: search,
                     onValueChange: setSearch,
-                    placeholder: "Search variables…",
+                    placeholder: strings.searchVariablesPlaceholder,
                     autoFocus: true
                 }),
                 /*#__PURE__*/ jsxs(CommandList, {
                     children: [
                         /*#__PURE__*/ jsx(CommandEmpty, {
-                            children: "No variables found."
+                            children: strings.noVariablesFound
                         }),
                         options.map((option)=>{
                             const Icon = OPTION_ICON[option.type];
@@ -127,7 +144,7 @@ const PromptEditorAutocompleteMenu = ({ open, anchorEl, initialSearch, options,
                                     }),
                                     /*#__PURE__*/ jsx("span", {
                                         className: "ml-auto pl-2 text-xs text-muted-foreground",
-                                        children: getPromptEditorTokenTypeLabel(option.type)
+                                        children: getPromptEditorTokenTypeLabel(option.type, strings)
                                     })
                                 ]
                             }, `${option.type}:${option.value}`);
@@ -139,15 +156,9 @@ const PromptEditorAutocompleteMenu = ({ open, anchorEl, initialSearch, options,
                                 /*#__PURE__*/ jsx(Variable, {
                                     className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
                                 }),
-                                /*#__PURE__*/ jsxs("span", {
+                                /*#__PURE__*/ jsx("span", {
                                     className: "truncate",
-                                    children: [
-                                        "Insert ",
-                                        /*#__PURE__*/ jsx("span", {
-                                            className: "font-medium",
-                                            children: freeFormPath
-                                        })
-                                    ]
+                                    children: renderInsertFreeForm(strings.insertFreeForm, freeFormPath)
                                 })
                             ]
                         })

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

@@ -27,8 +27,9 @@ __webpack_require__.d(__webpack_exports__, {
     TokenPill: ()=>TokenPill
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_react_namespaceObject = require("react");
 const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_prompt_editor_config_cjs_namespaceObject = require("../prompt-editor-config.cjs");
 const external_types_cjs_namespaceObject = require("../types.cjs");
 const TOKEN_TYPE_ICON = {
     input: external_lucide_react_namespaceObject.Variable,
@@ -38,6 +39,7 @@ const TOKEN_TYPE_ICON = {
     text: external_lucide_react_namespaceObject.Variable
 };
 const TokenPillBase = ({ value, tokenType, onRemove, diffType, readonly, isInvalid, isSelected, onMouseDown })=>{
+    const { strings } = (0, external_prompt_editor_config_cjs_namespaceObject.usePromptEditorConfig)();
     const PROMPT_EDITOR_TOKEN_COLORS = (0, external_types_cjs_namespaceObject.getPromptEditorTokenColors)();
     const colors = isInvalid && !diffType ? PROMPT_EDITOR_TOKEN_COLORS.invalid : PROMPT_EDITOR_TOKEN_COLORS.valid;
     const Icon = TOKEN_TYPE_ICON[tokenType];
@@ -84,7 +86,7 @@ const TokenPillBase = ({ value, tokenType, onRemove, diffType, readonly, isInval
             }),
             !readonly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                 type: "button",
-                "aria-label": "Remove token",
+                "aria-label": strings.removeToken,
                 className: "inline-flex items-center justify-center p-px border-0 bg-transparent cursor-pointer rounded-[2px] w-4 h-4",
                 style: {
                     color: colors.text

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo } from "react";
 import { Database, Paperclip, SquareFunction, Variable } from "lucide-react";
+import { memo } from "react";
+import { usePromptEditorConfig } from "../prompt-editor-config.js";
 import { getPromptEditorTokenColors } from "../types.js";
 const TOKEN_TYPE_ICON = {
     input: Variable,
@@ -10,6 +11,7 @@ const TOKEN_TYPE_ICON = {
     text: Variable
 };
 const TokenPillBase = ({ value, tokenType, onRemove, diffType, readonly, isInvalid, isSelected, onMouseDown })=>{
+    const { strings } = usePromptEditorConfig();
     const PROMPT_EDITOR_TOKEN_COLORS = getPromptEditorTokenColors();
     const colors = isInvalid && !diffType ? PROMPT_EDITOR_TOKEN_COLORS.invalid : PROMPT_EDITOR_TOKEN_COLORS.valid;
     const Icon = TOKEN_TYPE_ICON[tokenType];
@@ -56,7 +58,7 @@ const TokenPillBase = ({ value, tokenType, onRemove, diffType, readonly, isInval
             }),
             !readonly && /*#__PURE__*/ jsx("button", {
                 type: "button",
-                "aria-label": "Remove token",
+                "aria-label": strings.removeToken,
                 className: "inline-flex items-center justify-center p-px border-0 bg-transparent cursor-pointer rounded-[2px] w-4 h-4",
                 style: {
                     color: colors.text

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

@@ -0,0 +1,58 @@
+"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__, {
+    TokenPillSlot: ()=>TokenPillSlot
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_prompt_editor_config_cjs_namespaceObject = require("../prompt-editor-config.cjs");
+const external_TokenPillWithTooltip_cjs_namespaceObject = require("./TokenPillWithTooltip.cjs");
+const TokenPillSlot = (props)=>{
+    const { renderTokenPill } = (0, external_prompt_editor_config_cjs_namespaceObject.usePromptEditorConfig)();
+    const { value, tokenType, nodeKey, diffType, readonly, isInvalid, onRemove } = props;
+    const defaultPill = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TokenPillWithTooltip_cjs_namespaceObject.TokenPillWithTooltip, {
+        value: value,
+        tokenType: tokenType,
+        nodeKey: nodeKey,
+        diffType: diffType,
+        readonly: readonly,
+        isInvalid: isInvalid,
+        onRemove: onRemove
+    });
+    if (!renderTokenPill) return defaultPill;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+        children: renderTokenPill({
+            ...props,
+            defaultPill
+        })
+    });
+};
+exports.TokenPillSlot = __webpack_exports__.TokenPillSlot;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "TokenPillSlot"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,7 @@
+import type { PromptEditorTokenPillSlotProps } from '../prompt-editor-config';
+/**
+ * Indirection between a token decorator node and its rendered pill. Renders the built-in
+ * `TokenPillWithTooltip` unless the host supplied `renderTokenPill` on the editor, in which case
+ * that renderer decides (and receives the built-in pill as `defaultPill` so it can decorate it).
+ */
+export declare const TokenPillSlot: (props: Omit<PromptEditorTokenPillSlotProps, "defaultPill">) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { usePromptEditorConfig } from "../prompt-editor-config.js";
+import { TokenPillWithTooltip } from "./TokenPillWithTooltip.js";
+const TokenPillSlot = (props)=>{
+    const { renderTokenPill } = usePromptEditorConfig();
+    const { value, tokenType, nodeKey, diffType, readonly, isInvalid, onRemove } = props;
+    const defaultPill = /*#__PURE__*/ jsx(TokenPillWithTooltip, {
+        value: value,
+        tokenType: tokenType,
+        nodeKey: nodeKey,
+        diffType: diffType,
+        readonly: readonly,
+        isInvalid: isInvalid,
+        onRemove: onRemove
+    });
+    if (!renderTokenPill) return defaultPill;
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: renderTokenPill({
+            ...props,
+            defaultPill
+        })
+    });
+};
+export { TokenPillSlot };