@uipath/apollo-wind 2.55.0 → 2.57.0

package/dist/components/ui/model-picker/primitives/ModelOptionRow.js

@@ -0,0 +1,135 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Pencil, Trash2 } from "lucide-react";
+import { memo } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../tooltip.js";
+import { cn } from "../../../../lib/index.js";
+import { DEFAULT_MODEL_PICKER_LABELS } from "../labels.js";
+import { ModelTagChip } from "../ModelTagChip.js";
+import { deriveModelTags, isByoModel } from "../utils.js";
+const FULL_OPTION_HEIGHT = 64;
+const DENSE_OPTION_HEIGHT = 44;
+const ModelOptionRowInner = ({ model, index, active, selected, onSelect, onActivate, tagContext, tagVariants, renderActions, renderMeta, dense, hideTagKinds, id, 'data-testid': dataTestId })=>{
+    const labels = tagContext?.labels ?? DEFAULT_MODEL_PICKER_LABELS;
+    const inlineTags = deriveModelTags(model, tagContext ?? {}).filter((t)=>!hideTagKinds?.includes(t.kind));
+    const primaryLabel = model.displayName ?? null;
+    const primary = primaryLabel ?? model.modelName;
+    const usesFriendlyName = !!primaryLabel && primaryLabel !== model.modelId;
+    const techId = usesFriendlyName ? model.modelId : null;
+    const contextTokens = model.modelDetails?.contextWindowTokens;
+    const contextLabel = null != contextTokens && contextTokens > 0 ? labels.contextWindow(contextTokens) : null;
+    const rowActions = renderActions ? renderActions(model) : null;
+    const meta = renderMeta?.(model);
+    return /*#__PURE__*/ jsxs("div", {
+        "aria-selected": selected,
+        className: cn('@container relative flex w-full cursor-pointer items-start justify-start text-left', dense ? 'min-h-11 gap-2 px-3 py-1.5' : 'min-h-16 gap-3 px-3.5 py-2.5', selected ? 'bg-surface-selected shadow-[inset_3px_0_0_var(--brand)]' : active ? 'bg-surface-hover' : 'bg-transparent', !selected && 'hover:bg-surface-hover'),
+        "data-slot": "model-picker-row",
+        "data-testid": dataTestId,
+        id: id,
+        onClick: ()=>onSelect(model),
+        onMouseEnter: onActivate ? ()=>onActivate(index) : void 0,
+        role: "option",
+        tabIndex: -1,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "min-w-0 flex-1",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex min-w-0 flex-nowrap items-center gap-1.5",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: cn('min-w-0 flex-[0_1_auto] truncate leading-snug font-semibold text-foreground', dense ? 'text-xs' : 'text-sm'),
+                                children: primary
+                            }),
+                            inlineTags.map((t)=>/*#__PURE__*/ jsx("span", {
+                                    className: "flex min-w-0 shrink items-center overflow-hidden [&_[data-slot=model-picker-tag]]:max-w-full [&_[data-slot=model-picker-tag]]:truncate",
+                                    children: /*#__PURE__*/ jsx(ModelTagChip, {
+                                        tag: t,
+                                        variants: tagVariants
+                                    })
+                                }, `${t.kind}-${t.label}`))
+                        ]
+                    }),
+                    techId && /*#__PURE__*/ jsx("span", {
+                        className: "mt-0.5 block truncate font-mono text-[11px] text-foreground-muted",
+                        children: techId
+                    }),
+                    model.byoConnectionLabel && /*#__PURE__*/ jsx("span", {
+                        className: cn('block max-w-full truncate text-xs text-foreground-muted', !techId && 'mt-0.5'),
+                        children: model.byoConnectionLabel
+                    })
+                ]
+            }),
+            (contextLabel ?? meta) && /*#__PURE__*/ jsxs("div", {
+                className: "flex shrink-0 flex-col items-end gap-1 pt-px @max-[380px]:hidden",
+                onClick: (e)=>e.stopPropagation(),
+                children: [
+                    contextLabel && /*#__PURE__*/ jsx("span", {
+                        className: "text-[11px] leading-tight text-foreground-muted",
+                        children: contextLabel
+                    }),
+                    meta
+                ]
+            }),
+            rowActions && /*#__PURE__*/ jsx("div", {
+                className: "flex shrink-0 items-center gap-0.5 pt-px text-foreground-muted",
+                onClick: (e)=>e.stopPropagation(),
+                children: rowActions
+            })
+        ]
+    });
+};
+const ModelOptionRow = /*#__PURE__*/ memo(ModelOptionRowInner);
+ModelOptionRow.displayName = 'ModelOptionRow';
+function defaultRowActions(model, options = {}) {
+    const { labels = DEFAULT_MODEL_PICKER_LABELS, onEdit, onDelete } = options;
+    if (!onEdit && !onDelete) return null;
+    if (!isByoModel(model)) return null;
+    const editTitle = labels.editConfiguration;
+    const deleteTitle = labels.deleteConfiguration;
+    return /*#__PURE__*/ jsxs(TooltipProvider, {
+        children: [
+            onEdit && /*#__PURE__*/ jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx("button", {
+                            "aria-label": editTitle,
+                            className: "cursor-pointer rounded p-1 text-inherit hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+                            onClick: ()=>onEdit(model),
+                            tabIndex: -1,
+                            type: "button",
+                            children: /*#__PURE__*/ jsx(Pencil, {
+                                className: "size-3.5"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        children: editTitle
+                    })
+                ]
+            }),
+            onDelete && /*#__PURE__*/ jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx("button", {
+                            "aria-label": deleteTitle,
+                            className: "cursor-pointer rounded p-1 text-inherit hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+                            onClick: ()=>onDelete(model),
+                            tabIndex: -1,
+                            type: "button",
+                            children: /*#__PURE__*/ jsx(Trash2, {
+                                className: "size-3.5"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        children: deleteTitle
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { DENSE_OPTION_HEIGHT, FULL_OPTION_HEIGHT, ModelOptionRow, defaultRowActions };

package/dist/components/ui/model-picker/primitives/OptionList.cjs

@@ -0,0 +1,295 @@
+"use strict";
+"use client";
+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__, {
+    optionDomId: ()=>optionDomId,
+    VirtualOptionList: ()=>VirtualOptionList,
+    GroupedOptionList: ()=>GroupedOptionList,
+    isCollapsibleGroup: ()=>isCollapsibleGroup
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_virtual_namespaceObject = require("@tanstack/react-virtual");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const external_labels_cjs_namespaceObject = require("../labels.cjs");
+const external_GroupHeader_cjs_namespaceObject = require("./GroupHeader.cjs");
+const external_ModelOptionRow_cjs_namespaceObject = require("./ModelOptionRow.cjs");
+const BYO_GROUP_KEY = 'byo';
+function isCollapsibleGroup(groupKey) {
+    return groupKey === BYO_GROUP_KEY;
+}
+const DEFAULT_LIST_MAX_HEIGHT = 362;
+function groupLeadingIcon(groupKey) {
+    if (groupKey === BYO_GROUP_KEY) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Shield, {
+        className: "size-3.5"
+    });
+    return null;
+}
+const GROUP_HINT_KEYS = {
+    recommended: 'recommendedGroupHint',
+    preview: 'previewGroupHint',
+    byo: 'byoGroupHint',
+    more: 'moreGroupHint',
+    deprecating: 'deprecatingGroupHint'
+};
+function groupHint(groupKey, labels) {
+    const key = GROUP_HINT_KEYS[groupKey];
+    return key ? labels[key] : void 0;
+}
+function countLabel(n, labels) {
+    return null == n ? void 0 : labels.modelCount(n);
+}
+function optionDomId(listboxId, modelId) {
+    const safe = modelId.replace(/[^A-Za-z0-9-]/g, (c)=>`_${c.codePointAt(0)?.toString(16)}_`);
+    return `${listboxId}-opt-${safe}`;
+}
+const GroupedOptionList = ({ id, options, activeIndex, setActiveIndex, selectedId, onSelect, tagContext, tagVariants, groupCounts, renderRowActions, renderRowMeta, dense, maxHeight = DEFAULT_LIST_MAX_HEIGHT, hideGroupHeaders, hideTagKinds, collapsedGroups, onGroupToggle, 'aria-label': ariaLabel = 'Models' })=>{
+    const labels = tagContext?.labels ?? external_labels_cjs_namespaceObject.DEFAULT_MODEL_PICKER_LABELS;
+    let lastGroupKey;
+    let headerCount = 0;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const model = options[activeIndex];
+        if (!model) return;
+        document.getElementById(optionDomId(id, model.modelId))?.scrollIntoView?.({
+            block: 'nearest'
+        });
+    }, [
+        activeIndex,
+        id,
+        options
+    ]);
+    const derivedCounts = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (groupCounts) return groupCounts;
+        const out = {};
+        for (const o of options)out[o.groupKey] = (out[o.groupKey] ?? 0) + 1;
+        return out;
+    }, [
+        groupCounts,
+        options
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        "aria-label": ariaLabel,
+        className: "overflow-y-auto py-1",
+        "data-slot": "model-picker-listbox",
+        id: id,
+        role: "listbox",
+        style: {
+            maxHeight
+        },
+        children: options.map((opt, i)=>{
+            const showHeader = !hideGroupHeaders && opt.groupKey !== lastGroupKey;
+            const isFirstHeader = showHeader && 0 === headerCount;
+            if (showHeader) headerCount += 1;
+            lastGroupKey = opt.groupKey;
+            const isCollapsible = isCollapsibleGroup(opt.groupKey);
+            const isCollapsed = isCollapsible && (collapsedGroups?.has(opt.groupKey) ?? false);
+            const headerActive = isCollapsed && options[activeIndex]?.groupKey === opt.groupKey;
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_react_default().Fragment, {
+                children: [
+                    showHeader && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupHeader_cjs_namespaceObject.GroupHeader, {
+                        active: headerActive,
+                        label: opt.groupLabel,
+                        hint: groupHint(opt.groupKey, labels),
+                        count: derivedCounts[opt.groupKey],
+                        countLabel: countLabel(derivedCounts[opt.groupKey], labels),
+                        dense: dense,
+                        isFirst: isFirstHeader,
+                        leadingIcon: groupLeadingIcon(opt.groupKey),
+                        collapsible: isCollapsible,
+                        collapsed: isCollapsed,
+                        onToggle: isCollapsible ? ()=>onGroupToggle?.(opt.groupKey) : void 0
+                    }),
+                    !isCollapsed && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ModelOptionRow_cjs_namespaceObject.ModelOptionRow, {
+                        id: optionDomId(id, opt.modelId),
+                        model: opt,
+                        index: i,
+                        active: i === activeIndex,
+                        selected: opt.modelId === selectedId,
+                        onSelect: onSelect,
+                        onActivate: setActiveIndex,
+                        tagContext: tagContext,
+                        tagVariants: tagVariants,
+                        hideTagKinds: hideTagKinds?.filter((k)=>k === opt.groupKey),
+                        renderMeta: renderRowMeta,
+                        renderActions: renderRowActions,
+                        dense: dense
+                    })
+                ]
+            }, opt.modelId);
+        })
+    });
+};
+const VirtualOptionList = ({ id, options, activeIndex, setActiveIndex, selectedId, onSelect, tagContext, tagVariants, groupCounts, renderRowActions, renderRowMeta, dense, maxHeight = DEFAULT_LIST_MAX_HEIGHT, hideGroupHeaders, hideTagKinds, collapsedGroups, onGroupToggle, 'aria-label': ariaLabel = 'Models' })=>{
+    const labels = tagContext?.labels ?? external_labels_cjs_namespaceObject.DEFAULT_MODEL_PICKER_LABELS;
+    const rows = (0, external_react_namespaceObject.useMemo)(()=>{
+        const out = [];
+        let lastGroupKey;
+        let headerCount = 0;
+        const counts = groupCounts ?? {};
+        if (!groupCounts) for (const o of options)counts[o.groupKey] = (counts[o.groupKey] ?? 0) + 1;
+        options.forEach((opt, i)=>{
+            const collapsed = isCollapsibleGroup(opt.groupKey) && (collapsedGroups?.has(opt.groupKey) ?? false);
+            if (!hideGroupHeaders && opt.groupKey !== lastGroupKey) {
+                out.push({
+                    kind: 'header',
+                    key: `h-${opt.groupKey}`,
+                    groupKey: opt.groupKey,
+                    label: opt.groupLabel,
+                    isFirst: 0 === headerCount,
+                    count: counts[opt.groupKey] ?? 0
+                });
+                headerCount += 1;
+            }
+            lastGroupKey = opt.groupKey;
+            if (!collapsed) out.push({
+                kind: 'option',
+                key: opt.modelId,
+                model: opt,
+                index: i
+            });
+        });
+        return out;
+    }, [
+        options,
+        hideGroupHeaders,
+        groupCounts,
+        collapsedGroups
+    ]);
+    const headerHeight = dense ? 32 : 48;
+    const optionHeight = dense ? external_ModelOptionRow_cjs_namespaceObject.DENSE_OPTION_HEIGHT : external_ModelOptionRow_cjs_namespaceObject.FULL_OPTION_HEIGHT;
+    const parentRef = (0, external_react_namespaceObject.useRef)(null);
+    const virtualizer = (0, react_virtual_namespaceObject.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: ()=>parentRef.current,
+        estimateSize: (i)=>rows[i]?.kind === 'header' ? headerHeight : optionHeight,
+        overscan: 10
+    });
+    const measure = virtualizer.measureElement;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const rowIdx = rows.findIndex((r)=>'option' === r.kind && r.index === activeIndex);
+        if (rowIdx >= 0) virtualizer.scrollToIndex(rowIdx, {
+            align: 'auto'
+        });
+    }, [
+        activeIndex,
+        rows,
+        virtualizer
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        "aria-label": ariaLabel,
+        className: "relative overflow-y-auto py-1",
+        "data-slot": "model-picker-listbox",
+        id: id,
+        ref: parentRef,
+        role: "listbox",
+        style: {
+            maxHeight
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: "relative w-full",
+            style: {
+                height: virtualizer.getTotalSize()
+            },
+            children: virtualizer.getVirtualItems().map((vi)=>{
+                const row = rows[vi.index];
+                if (!row) return null;
+                const baseStyle = {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    transform: `translateY(${vi.start}px)`
+                };
+                if ('header' === row.kind) {
+                    const isCollapsible = isCollapsibleGroup(row.groupKey);
+                    const isCollapsed = isCollapsible && (collapsedGroups?.has(row.groupKey) ?? false);
+                    const headerActive = isCollapsed && options[activeIndex]?.groupKey === row.groupKey;
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        "data-index": vi.index,
+                        ref: measure,
+                        style: baseStyle,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupHeader_cjs_namespaceObject.GroupHeader, {
+                            active: headerActive,
+                            label: row.label,
+                            hint: groupHint(row.groupKey, labels),
+                            count: row.count,
+                            countLabel: countLabel(row.count, labels),
+                            dense: dense,
+                            isFirst: row.isFirst,
+                            leadingIcon: groupLeadingIcon(row.groupKey),
+                            collapsible: isCollapsible,
+                            collapsed: isCollapsed,
+                            onToggle: isCollapsible ? ()=>onGroupToggle?.(row.groupKey) : void 0
+                        })
+                    }, row.key);
+                }
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    "data-index": vi.index,
+                    ref: measure,
+                    style: baseStyle,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ModelOptionRow_cjs_namespaceObject.ModelOptionRow, {
+                        id: optionDomId(id, row.model.modelId),
+                        model: row.model,
+                        index: row.index,
+                        active: row.index === activeIndex,
+                        selected: row.model.modelId === selectedId,
+                        onSelect: onSelect,
+                        onActivate: setActiveIndex,
+                        tagContext: tagContext,
+                        tagVariants: tagVariants,
+                        hideTagKinds: hideTagKinds?.filter((k)=>k === row.model.groupKey),
+                        renderMeta: renderRowMeta,
+                        renderActions: renderRowActions,
+                        dense: dense
+                    })
+                }, row.key);
+            })
+        })
+    });
+};
+exports.GroupedOptionList = __webpack_exports__.GroupedOptionList;
+exports.VirtualOptionList = __webpack_exports__.VirtualOptionList;
+exports.isCollapsibleGroup = __webpack_exports__.isCollapsibleGroup;
+exports.optionDomId = __webpack_exports__.optionDomId;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "GroupedOptionList",
+    "VirtualOptionList",
+    "isCollapsibleGroup",
+    "optionDomId"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/model-picker/primitives/OptionList.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import type { DiscoveryModel } from '../types';
+import type { DeriveModelTagsContext } from '../utils';
+export interface AnnotatedModel extends DiscoveryModel {
+    groupKey: string;
+    groupLabel: string;
+}
+export interface OptionListProps {
+    id: string;
+    options: AnnotatedModel[];
+    activeIndex: number;
+    setActiveIndex: (i: number) => void;
+    selectedId: string | null;
+    onSelect: (m: DiscoveryModel) => void;
+    /**
+     * Forwarded to every row's `deriveModelTags` call. Use for
+     * `recommendedModelIds`, `previewModelIds`, `badgesFor`,
+     * `customTagsFor`, `homeRegion`, and `labels`.
+     */
+    tagContext?: DeriveModelTagsContext;
+    /**
+     * Variant lookup for tag kinds the design system doesn't know
+     * about. Forwarded to every row's `<ModelTagChip>`.
+     */
+    tagVariants?: Record<string, string>;
+    /**
+     * Group counts used by GroupHeader to render the right-aligned count
+     * (e.g. "3 models"). Keyed by `groupKey`. When omitted, the
+     * counter is derived from the visible options.
+     */
+    groupCounts?: Record<string, number>;
+    /** Override the BYO edit/delete row actions. Return null to suppress. */
+    renderRowActions?: (m: DiscoveryModel) => React.ReactNode;
+    /** Per-row meta column (cost, context window, etc.). */
+    renderRowMeta?: (m: DiscoveryModel) => React.ReactNode;
+    /** Reduced row + header sizes. */
+    dense?: boolean;
+    /** Maximum height of the scroll region. Default 362 (design spec). */
+    maxHeight?: number;
+    /**
+     * Suppress group header rows. Options are still grouped + ordered as
+     * usual; only the visual section labels are hidden. Use for compact /
+     * inline pickers where headers add too much chrome.
+     */
+    hideGroupHeaders?: boolean;
+    /**
+     * Tag kinds to hide from chips on a row **whose own group already conveys
+     * them** — a "Recommended" chip inside the Recommended section is noise.
+     * Matching is by group key, so a kind is only suppressed where it is
+     * genuinely redundant: a Recommended model filed under Custom Models (BYO)
+     * keeps its chip, because that section says nothing about lifecycle.
+     *
+     * Tags are still derived by `deriveModelTags`; this only affects rendering.
+     *
+     * Opt-in: `ModelPicker` passes nothing, so every chip renders everywhere.
+     */
+    hideTagKinds?: readonly string[];
+    /**
+     * Accessible name for the listbox. Defaults to "Models". Screen
+     * readers announce this when focus enters the picker so users know
+     * what they're selecting from.
+     */
+    'aria-label'?: string;
+    /**
+     * Set of group keys currently rendered as collapsed (header visible,
+     * options hidden). Today only the BYO group ('byo') is supported as
+     * collapsible; the parent ModelPicker owns this state.
+     */
+    collapsedGroups?: ReadonlySet<string>;
+    /** Click handler for collapsible group headers. */
+    onGroupToggle?: (groupKey: string) => void;
+}
+/**
+ * Which sections can collapse. One rule for both renderers and for the
+ * keyboard handler in `useModelPickerState`, so a key in `collapsedGroups`
+ * never hides rows in one renderer and not the other. Today: BYO only.
+ */
+export declare function isCollapsibleGroup(groupKey: string): boolean;
+/**
+ * Build a stable DOM id for a given option, derived from the listbox
+ * id + the model's id. Used by the search input's
+ * `aria-activedescendant` so screen readers can announce the active
+ * option without moving DOM focus.
+ */
+export declare function optionDomId(listboxId: string, modelId: string): string;
+export declare const GroupedOptionList: React.FC<OptionListProps>;
+export declare const VirtualOptionList: React.FC<OptionListProps>;