@uipath/apollo-react 3.27.0 → 3.28.0

package/dist/material/components/ap-chat/components/input/chat-input-resource-picker.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLingui } from "@lingui/react";
 import CircularProgress from "@mui/material/CircularProgress";
 import Menu from "@mui/material/Menu";
@@ -7,10 +7,11 @@ import { styled } from "@mui/material/styles";
 import apollo_core, { FontVariantToken } from "@uipath/apollo-core";
 import { ApButton, ApIcon, ApTypography } from "../../../../index.js";
 import react, { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { List, useListRef } from "react-window";
 import { ApSkeleton } from "../../../ap-skeleton/index.js";
 import { useChatState } from "../../providers/chat-state-provider.js";
 import { isResourceSelector, useAutopilotChatResourcePicker } from "../../providers/resource-picker-provider.js";
-import { CHAT_RESOURCE_PICKER_MAX_SKELETON_COUNT, CHAT_RESOURCE_PICKER_MENU_MAX_HEIGHT, CHAT_RESOURCE_PICKER_MENU_WIDTH, CHAT_RESOURCE_PICKER_MIN_SKELETON_COUNT, CHAT_RESOURCE_PICKER_SCROLL_THRESHOLD, CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY } from "../../service/index.js";
+import { CHAT_RESOURCE_PICKER_ITEM_HEIGHT, CHAT_RESOURCE_PICKER_LOAD_MORE_THRESHOLD, CHAT_RESOURCE_PICKER_MAX_SKELETON_COUNT, CHAT_RESOURCE_PICKER_MENU_MAX_HEIGHT, CHAT_RESOURCE_PICKER_MENU_WIDTH, CHAT_RESOURCE_PICKER_MIN_SKELETON_COUNT, CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY } from "../../service/index.js";
 import { AutopilotChatIconButton } from "../common/icon-button.js";
 import { AutopilotChatTooltip } from "../common/tooltip.js";
 const ellipsisStyle = {
@@ -46,12 +47,6 @@ const EmptyContainer = styled('div')(({ theme })=>({
         padding: `${apollo_core.Padding.PadXxl} ${apollo_core.Padding.PadXxxl}`,
         color: theme.palette.semantic.colorForegroundDeEmp
     }));
-const LoadMoreContainer = styled('div')({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: apollo_core.Padding.PadXxl
-});
 const DrillDownHeader = styled('div')(({ theme })=>({
         display: 'flex',
         alignItems: 'center',
@@ -62,17 +57,57 @@ const DrillDownHeader = styled('div')(({ theme })=>({
 const SkeletonItem = styled(StyledMenuItem)({
     pointerEvents: 'none'
 });
-const chat_input_resource_picker_ResourceMenuItem = /*#__PURE__*/ react.memo(function({ item, isSelected, onItemClick, tooltipPlacement, fontToken }) {
+const StyledResourceList = styled(List)({
+    '&::-webkit-scrollbar': {
+        width: '6px'
+    },
+    '&::-webkit-scrollbar-track': {
+        background: 'transparent'
+    },
+    '&::-webkit-scrollbar-thumb': {
+        background: 'var(--color-border-de-emp)',
+        borderRadius: '3px'
+    }
+});
+const loaderRowStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+};
+const preventDefaultMouseDown = (e)=>e.preventDefault();
+const MENU_SLOT_PROPS = {
+    paper: {
+        sx: {
+            width: CHAT_RESOURCE_PICKER_MENU_WIDTH,
+            maxHeight: CHAT_RESOURCE_PICKER_MENU_MAX_HEIGHT,
+            overflowY: 'hidden',
+            display: 'flex',
+            flexDirection: 'column'
+        }
+    }
+};
+const VirtualizedResourceRow = ({ index, style, ariaAttributes, items, selectedIndex, navigationMode, handleItemClick, onMouseEnterItem, tooltipPlacement, fontToken })=>{
+    if (index >= items.length) return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...style,
+            ...loaderRowStyle
+        },
+        children: /*#__PURE__*/ jsx(CircularProgress, {
+            size: 20
+        })
+    });
+    const item = items[index];
+    const isSelected = index === selectedIndex;
     const isCategory = isResourceSelector(item);
     const tooltipContent = item.tooltip;
-    const handleClick = useCallback(()=>onItemClick(item), [
-        onItemClick,
-        item
-    ]);
+    const isKeyboardSelected = isSelected && 'keyboard' === navigationMode;
     const menuItem = /*#__PURE__*/ jsxs(StyledMenuItem, {
         id: `resource-item-${item.id}`,
         selected: isSelected,
-        onClick: handleClick,
+        onClick: ()=>handleItemClick(item),
+        onMouseEnter: ()=>onMouseEnterItem(index),
+        style: style,
+        ...ariaAttributes,
         children: [
             /*#__PURE__*/ jsxs(ResourceItemContent, {
                 children: [
@@ -103,49 +138,167 @@ const chat_input_resource_picker_ResourceMenuItem = /*#__PURE__*/ react.memo(fun
             children: tooltipContent
         }),
         placement: tooltipPlacement,
-        open: isSelected ? true : void 0,
-        enterDelay: isSelected ? 0 : CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
-        enterNextDelay: isSelected ? 0 : CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
+        open: isKeyboardSelected ? true : void 0,
+        enterDelay: isKeyboardSelected ? 0 : CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
+        enterNextDelay: isKeyboardSelected ? 0 : CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
         children: menuItem
     });
-});
-function ResourcePickerDropdownInner(_props, ref) {
-    const { isOpen, anchorPosition, displayedItems, drillDown, query, loading, loadingMore, searchInProgress, hasMore, error, previousDisplayCount, handleItemClick, close, goBackOrClose, retryLoad, loadMore } = useAutopilotChatResourcePicker();
+};
+const chat_input_resource_picker_MenuContent = /*#__PURE__*/ react.memo(function({ virtualListRef, selectedIndex, navigationMode, onMouseEnterItem, onItemClick }) {
+    const { displayedItems: items, drillDown, query, loading, loadingMore, searchInProgress, hasMore, error, previousDisplayCount, goBackOrClose, retryLoad, loadMore } = useAutopilotChatResourcePicker();
     const { theming, spacing } = useChatState();
-    const listRef = useRef(null);
-    const isOpenRef = useRef(isOpen);
-    isOpenRef.current = isOpen;
     const { _ } = useLingui();
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const scrollStateRef = useRef({
+    const drillDownHeaderRef = useRef(null);
+    const [drillDownHeaderHeight, setDrillDownHeaderHeight] = useState(0);
+    useLayoutEffect(()=>{
+        if (!drillDown) return void setDrillDownHeaderHeight(0);
+        setDrillDownHeaderHeight(drillDownHeaderRef.current?.offsetHeight ?? 0);
+    }, [
+        drillDown
+    ]);
+    const handleRowsRendered = useCallback((visibleRows, _allRows)=>{
+        if (!hasMore || loadingMore) return;
+        if (visibleRows.stopIndex >= items.length - CHAT_RESOURCE_PICKER_LOAD_MORE_THRESHOLD) loadMore();
+    }, [
+        items.length,
         hasMore,
         loadingMore,
-        loadMore,
-        scrollTop: 0,
-        container: null
+        loadMore
+    ]);
+    const tooltipPlacement = theming?.chatMenu?.groupItemTooltipPlacement ?? 'left';
+    const isLoadingState = loading || searchInProgress;
+    const skeletonElements = useMemo(()=>{
+        const skeletonCount = Math.min(Math.max(previousDisplayCount, CHAT_RESOURCE_PICKER_MIN_SKELETON_COUNT), CHAT_RESOURCE_PICKER_MAX_SKELETON_COUNT);
+        return Array.from({
+            length: skeletonCount
+        }).map((_, index)=>/*#__PURE__*/ jsx(SkeletonItem, {
+                disabled: true,
+                children: /*#__PURE__*/ jsx(ApSkeleton, {})
+            }, `skeleton-${index}`));
+    }, [
+        previousDisplayCount
+    ]);
+    const rowCount = items.length + (loadingMore ? 1 : 0);
+    const listHeight = Math.min(CHAT_RESOURCE_PICKER_MENU_MAX_HEIGHT - drillDownHeaderHeight, rowCount * CHAT_RESOURCE_PICKER_ITEM_HEIGHT);
+    const rowProps = useMemo(()=>({
+            items,
+            selectedIndex,
+            navigationMode,
+            handleItemClick: onItemClick,
+            onMouseEnterItem,
+            tooltipPlacement,
+            fontToken: spacing.primaryFontToken
+        }), [
+        items,
+        selectedIndex,
+        navigationMode,
+        onItemClick,
+        onMouseEnterItem,
+        tooltipPlacement,
+        spacing.primaryFontToken
+    ]);
+    const drillDownHeader = drillDown ? /*#__PURE__*/ jsxs(DrillDownHeader, {
+        ref: drillDownHeaderRef,
+        children: [
+            /*#__PURE__*/ jsx(AutopilotChatIconButton, {
+                size: "small",
+                onClick: goBackOrClose,
+                "aria-label": _({
+                    id: 'autopilot-chat.resource-picker.back'
+                }),
+                children: /*#__PURE__*/ jsx(ApIcon, {
+                    variant: "outlined",
+                    name: "arrow_back",
+                    size: apollo_core.Icon.IconXs
+                })
+            }),
+            /*#__PURE__*/ jsx(ApTypography, {
+                variant: spacing.primaryBoldFontToken,
+                style: ellipsisStyle,
+                children: drillDown.category.displayName
+            })
+        ]
+    }) : null;
+    if (isLoadingState) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            drillDownHeader,
+            skeletonElements
+        ]
     });
-    scrollStateRef.current.hasMore = hasMore;
-    scrollStateRef.current.loadingMore = loadingMore;
-    scrollStateRef.current.loadMore = loadMore;
+    if (error) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            drillDownHeader,
+            /*#__PURE__*/ jsxs(ErrorContainer, {
+                children: [
+                    /*#__PURE__*/ jsx(ApTypography, {
+                        variant: FontVariantToken.fontSizeS,
+                        children: error
+                    }),
+                    /*#__PURE__*/ jsx(ApButton, {
+                        variant: "text",
+                        size: "small",
+                        onClick: retryLoad,
+                        label: _({
+                            id: 'autopilot-chat.resource-picker.retry'
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+    if (0 === items.length) {
+        const emptyMessage = query.trim() ? _({
+            id: 'autopilot-chat.resource-picker.no-results'
+        }) : _({
+            id: 'autopilot-chat.resource-picker.empty'
+        });
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                drillDownHeader,
+                /*#__PURE__*/ jsx(EmptyContainer, {
+                    children: /*#__PURE__*/ jsx(ApTypography, {
+                        variant: FontVariantToken.fontSizeS,
+                        children: emptyMessage
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            drillDownHeader,
+            /*#__PURE__*/ jsx(StyledResourceList, {
+                listRef: virtualListRef,
+                rowProps: rowProps,
+                rowComponent: VirtualizedResourceRow,
+                rowCount: rowCount,
+                rowHeight: CHAT_RESOURCE_PICKER_ITEM_HEIGHT,
+                overscanCount: 5,
+                onRowsRendered: handleRowsRendered,
+                style: {
+                    height: listHeight
+                }
+            })
+        ]
+    });
+});
+function ResourcePickerDropdownInner(_props, ref) {
+    const { isOpen, isOpenRef, anchorPosition, displayedItems: items, drillDown, query, handleItemClick, close, goBackOrClose } = useAutopilotChatResourcePicker();
+    const virtualListRef = useListRef(null);
+    const { _ } = useLingui();
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [navigationMode, setNavigationMode] = useState('none');
     const prevStateRef = useRef({
         query,
-        drillDownId: drillDown?.category?.id,
-        selectedIndex,
-        loadingMore
+        drillDownId: drillDown?.category?.id
     });
-    const handleScroll = useCallback((event)=>{
-        const target = event.currentTarget;
-        const state = scrollStateRef.current;
-        state.scrollTop = target.scrollTop;
-        state.container = target;
-        if (!state.hasMore || state.loadingMore) return;
-        const nearBottom = target.scrollHeight - target.scrollTop - target.clientHeight < CHAT_RESOURCE_PICKER_SCROLL_THRESHOLD;
-        if (nearBottom) state.loadMore();
-    }, []);
     useEffect(()=>{
         const prev = prevStateRef.current;
         const currentDrillDownId = drillDown?.category?.id;
-        if (prev.query !== query || prev.drillDownId !== currentDrillDownId) setSelectedIndex(0);
+        if (prev.query !== query || prev.drillDownId !== currentDrillDownId) {
+            setSelectedIndex(0);
+            setNavigationMode('none');
+        }
         prev.query = query;
         prev.drillDownId = currentDrillDownId;
     }, [
@@ -153,44 +306,42 @@ function ResourcePickerDropdownInner(_props, ref) {
         drillDown
     ]);
     useEffect(()=>{
-        const prev = prevStateRef.current;
-        if (prev.selectedIndex === selectedIndex) return;
-        prev.selectedIndex = selectedIndex;
-        const selectedItem = displayedItems[selectedIndex];
-        if (listRef.current && selectedItem) {
-            const selectedElement = listRef.current.querySelector(`#resource-item-${selectedItem.id}`);
-            selectedElement?.scrollIntoView({
-                block: 'nearest'
-            });
+        if (isOpen) {
+            setSelectedIndex(0);
+            setNavigationMode('none');
         }
     }, [
-        selectedIndex,
-        displayedItems
+        isOpen
     ]);
-    useLayoutEffect(()=>{
-        const prev = prevStateRef.current;
-        const wasLoadingMore = prev.loadingMore;
-        prev.loadingMore = loadingMore;
-        if (wasLoadingMore && !loadingMore) {
-            const { scrollTop, container } = scrollStateRef.current;
-            if (container && scrollTop > 0) container.scrollTop = scrollTop;
-        }
+    useEffect(()=>{
+        if ('keyboard' === navigationMode) virtualListRef.current?.scrollToRow({
+            index: selectedIndex,
+            align: 'auto'
+        });
     }, [
-        loadingMore
+        selectedIndex,
+        navigationMode,
+        virtualListRef
     ]);
     const navigateUp = useCallback(()=>{
         setSelectedIndex((prev)=>Math.max(prev - 1, 0));
+        setNavigationMode('keyboard');
     }, []);
     const navigateDown = useCallback(()=>{
-        setSelectedIndex((prev)=>Math.min(prev + 1, displayedItems.length - 1));
+        setSelectedIndex((prev)=>Math.min(prev + 1, items.length - 1));
+        setNavigationMode('keyboard');
     }, [
-        displayedItems.length
+        items.length
     ]);
+    const handleMouseEnterItem = useCallback((index)=>{
+        setSelectedIndex(index);
+        setNavigationMode('pointer');
+    }, []);
     const selectItem = useCallback(()=>{
-        const selectedItem = displayedItems[selectedIndex];
+        const selectedItem = items[selectedIndex];
         if (selectedItem) handleItemClick(selectedItem);
     }, [
-        displayedItems,
+        items,
         selectedIndex,
         handleItemClick
     ]);
@@ -213,7 +364,7 @@ function ResourcePickerDropdownInner(_props, ref) {
                         return true;
                     case 'Escape':
                         event.preventDefault();
-                        goBackOrClose();
+                        drillDown ? goBackOrClose() : close();
                         return true;
                     default:
                         return false;
@@ -223,138 +374,23 @@ function ResourcePickerDropdownInner(_props, ref) {
         navigateDown,
         navigateUp,
         selectItem,
-        goBackOrClose
+        goBackOrClose,
+        drillDown,
+        close
     ]);
-    const tooltipPlacement = theming?.chatMenu?.groupItemTooltipPlacement ?? 'left';
-    const skeletonElements = useMemo(()=>{
-        const skeletonCount = Math.min(Math.max(previousDisplayCount, CHAT_RESOURCE_PICKER_MIN_SKELETON_COUNT), CHAT_RESOURCE_PICKER_MAX_SKELETON_COUNT);
-        return Array.from({
-            length: skeletonCount
-        }).map((_, index)=>/*#__PURE__*/ jsx(SkeletonItem, {
-                disabled: true,
-                children: /*#__PURE__*/ jsx(ApSkeleton, {})
-            }, `skeleton-${index}`));
-    }, [
-        previousDisplayCount
-    ]);
-    const menuSlotProps = useMemo(()=>({
-            paper: {
-                sx: {
-                    width: CHAT_RESOURCE_PICKER_MENU_WIDTH,
-                    maxHeight: CHAT_RESOURCE_PICKER_MENU_MAX_HEIGHT,
-                    overflowY: 'auto'
-                },
-                onScroll: handleScroll
-            }
-        }), [
-        handleScroll
-    ]);
-    const isLoadingState = loading || searchInProgress;
-    const drillDownHeader = useMemo(()=>{
-        if (!drillDown) return null;
-        return /*#__PURE__*/ jsxs(DrillDownHeader, {
-            children: [
-                /*#__PURE__*/ jsx(AutopilotChatIconButton, {
-                    size: "small",
-                    onClick: goBackOrClose,
-                    "aria-label": _({
-                        id: 'autopilot-chat.resource-picker.back'
-                    }),
-                    children: /*#__PURE__*/ jsx(ApIcon, {
-                        variant: "outlined",
-                        name: "arrow_back",
-                        size: apollo_core.Icon.IconXs
-                    })
-                }),
-                /*#__PURE__*/ jsx(ApTypography, {
-                    variant: spacing.primaryBoldFontToken,
-                    style: ellipsisStyle,
-                    children: drillDown.category.displayName
-                })
-            ]
-        }, "drilldown-header");
+    const handleMenuClose = useCallback((_event, reason)=>{
+        if ('escapeKeyDown' === reason && drillDown) return void goBackOrClose();
+        close();
     }, [
         drillDown,
         goBackOrClose,
-        spacing.primaryBoldFontToken,
-        _
-    ]);
-    const menuContent = useMemo(()=>{
-        if (isLoadingState) return [
-            drillDownHeader,
-            ...skeletonElements
-        ];
-        if (error) return [
-            drillDownHeader,
-            /*#__PURE__*/ jsxs(ErrorContainer, {
-                children: [
-                    /*#__PURE__*/ jsx(ApTypography, {
-                        variant: FontVariantToken.fontSizeS,
-                        children: error
-                    }),
-                    /*#__PURE__*/ jsx(ApButton, {
-                        variant: "text",
-                        size: "small",
-                        onClick: retryLoad,
-                        label: "retry",
-                        children: _({
-                            id: 'autopilot-chat.resource-picker.retry'
-                        })
-                    })
-                ]
-            }, "error")
-        ];
-        if (0 === displayedItems.length) {
-            const emptyMessage = query.trim() ? _({
-                id: 'autopilot-chat.resource-picker.no-results'
-            }) : _({
-                id: 'autopilot-chat.resource-picker.empty'
-            });
-            return [
-                drillDownHeader,
-                /*#__PURE__*/ jsx(EmptyContainer, {
-                    children: /*#__PURE__*/ jsx(ApTypography, {
-                        variant: FontVariantToken.fontSizeS,
-                        children: emptyMessage
-                    })
-                }, "empty")
-            ];
-        }
-        return [
-            drillDownHeader,
-            ...displayedItems.map((item, index)=>/*#__PURE__*/ jsx(chat_input_resource_picker_ResourceMenuItem, {
-                    item: item,
-                    isSelected: index === selectedIndex,
-                    onItemClick: handleItemClick,
-                    tooltipPlacement: tooltipPlacement,
-                    fontToken: spacing.primaryFontToken
-                }, item.id)),
-            loadingMore && /*#__PURE__*/ jsx(LoadMoreContainer, {
-                children: /*#__PURE__*/ jsx(CircularProgress, {
-                    size: 20
-                })
-            }, "loading-more")
-        ];
-    }, [
-        isLoadingState,
-        drillDownHeader,
-        skeletonElements,
-        error,
-        retryLoad,
-        _,
-        displayedItems,
-        query,
-        selectedIndex,
-        handleItemClick,
-        tooltipPlacement,
-        spacing.primaryFontToken,
-        loadingMore
+        close
     ]);
     return /*#__PURE__*/ jsx(Menu, {
         open: isOpen,
         anchorReference: "anchorPosition",
         anchorPosition: anchorPosition ?? void 0,
-        onClose: close,
+        onClose: handleMenuClose,
         anchorOrigin: {
             vertical: 'top',
             horizontal: 'left'
@@ -370,10 +406,17 @@ function ResourcePickerDropdownInner(_props, ref) {
                 id: 'autopilot-chat.resource-picker.label'
             }),
             dense: true,
-            ref: listRef
+            disableListWrap: true,
+            onMouseDown: preventDefaultMouseDown
         },
-        slotProps: menuSlotProps,
-        children: menuContent
+        slotProps: MENU_SLOT_PROPS,
+        children: /*#__PURE__*/ jsx(chat_input_resource_picker_MenuContent, {
+            virtualListRef: virtualListRef,
+            selectedIndex: selectedIndex,
+            navigationMode: navigationMode,
+            onMouseEnterItem: handleMouseEnterItem,
+            onItemClick: handleItemClick
+        })
     });
 }
 const ResourcePickerDropdown = /*#__PURE__*/ react.memo(/*#__PURE__*/ forwardRef(ResourcePickerDropdownInner));

package/dist/material/components/ap-chat/components/input/chat-input.cjs

@@ -245,8 +245,7 @@ function AutopilotChatInputComponent() {
                                     onKeyDown: handleKeyDown,
                                     minRows: spacing.promptBox.minRows,
                                     maxRows: spacing.promptBox.maxRows,
-                                    lineHeight: editorLineHeight,
-                                    anchorEl: inputContainerRef.current
+                                    lineHeight: editorLineHeight
                                 })
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(GradientContainer, {})

package/dist/material/components/ap-chat/components/input/chat-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/input/chat-input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgF1B,iBAAS,2BAA2B,4CAuNnC;AAED,eAAO,MAAM,kBAAkB,+DAA0C,CAAC"}
+{"version":3,"file":"chat-input.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/input/chat-input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgF1B,iBAAS,2BAA2B,4CAsNnC;AAED,eAAO,MAAM,kBAAkB,+DAA0C,CAAC"}

package/dist/material/components/ap-chat/components/input/chat-input.js

@@ -206,8 +206,7 @@ function AutopilotChatInputComponent() {
                                     onKeyDown: handleKeyDown,
                                     minRows: spacing.promptBox.minRows,
                                     maxRows: spacing.promptBox.maxRows,
-                                    lineHeight: editorLineHeight,
-                                    anchorEl: inputContainerRef.current
+                                    lineHeight: editorLineHeight
                                 })
                             }),
                             /*#__PURE__*/ jsx(GradientContainer, {})

package/dist/material/components/ap-chat/components/input/tiptap/resource-chip-node-view.cjs

@@ -46,12 +46,12 @@ const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
 const chat_state_provider_cjs_namespaceObject = require("../../../providers/chat-state-provider.cjs");
 const index_cjs_namespaceObject = require("../../../service/index.cjs");
+const font_by_variant_cjs_namespaceObject = require("../../../utils/font-by-variant.cjs");
 const action_button_cjs_namespaceObject = require("../../common/action-button.cjs");
 const tooltip_cjs_namespaceObject = require("../../common/tooltip.cjs");
 const ChipContent = (0, styles_namespaceObject.styled)('span')(({ theme, readonly })=>({
         display: 'inline-flex',
         alignItems: 'center',
-        gap: apollo_core_default().Spacing.SpacingMicro,
         padding: `0 ${apollo_core_default().Padding.PadS}`,
         backgroundColor: theme.palette.semantic.colorPrimaryLighter,
         color: theme.palette.semantic.colorForeground,
@@ -73,7 +73,8 @@ const ChipLabel = (0, styles_namespaceObject.styled)('span')(()=>({
         fontWeight: apollo_core_default().FontFamily.FontWeightSemibold,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        padding: `0 ${apollo_core_default().Padding.PadS}`
     }));
 const ChipDeleteContainer = (0, styles_namespaceObject.styled)('span')(({ visible, compactMode, theme })=>({
         opacity: visible ? 1 : 0,
@@ -86,7 +87,7 @@ const ChipDeleteContainer = (0, styles_namespaceObject.styled)('span')(({ visibl
         backgroundColor: theme.palette.semantic.colorPrimaryLighter,
         borderRadius: `calc(${apollo_core_default().Border.BorderRadiusL} * 2)`,
         transition: 'opacity 0.15s ease-in-out',
-        '& .MuiButtonBase-root': {
+        '& .MuiButtonBase-root.MuiButtonBase-root': {
             height: compactMode ? apollo_core_default().Spacing.SpacingS : apollo_core_default().Spacing.SpacingM,
             width: compactMode ? apollo_core_default().Spacing.SpacingS : apollo_core_default().Spacing.SpacingM,
             padding: 0,
@@ -157,8 +158,16 @@ const ResourceChipBase = /*#__PURE__*/ external_react_default().memo(ResourceChi
 ResourceChipBase.displayName = 'ResourceChipBase';
 const ResourceChipNodeView = /*#__PURE__*/ external_react_default().memo(({ node, deleteNode })=>{
     const { label, icon } = node.attrs;
+    const { spacing } = (0, chat_state_provider_cjs_namespaceObject.useChatState)();
+    const lineHeight = (0, font_by_variant_cjs_namespaceObject.fontByVariant)(spacing.primaryFontToken)?.lineHeight ?? apollo_core_namespaceObject.Typography.fontSizeM.lineHeight;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tiptap_react_namespaceObject.NodeViewWrapper, {
         as: "span",
+        style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            height: lineHeight,
+            verticalAlign: 'top'
+        },
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ResourceChipBase, {
             label: label,
             icon: icon,

package/dist/material/components/ap-chat/components/input/tiptap/resource-chip-node-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resource-chip-node-view.d.ts","sourceRoot":"","sources":["../../../../../../../src/material/components/ap-chat/components/input/tiptap/resource-chip-node-view.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAmB,MAAM,eAAe,CAAC;AAEpE,OAAO,KAAK,MAAM,OAAO,CAAC;AA2D1B,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAmED,eAAO,MAAM,gBAAgB,mDAAoC,CAAC;AAGlE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAQvD,CAAC"}
+{"version":3,"file":"resource-chip-node-view.d.ts","sourceRoot":"","sources":["../../../../../../../src/material/components/ap-chat/components/input/tiptap/resource-chip-node-view.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAmB,MAAM,eAAe,CAAC;AAEpE,OAAO,KAAK,MAAM,OAAO,CAAC;AA4D1B,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAmED,eAAO,MAAM,gBAAgB,mDAAoC,CAAC;AAGlE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmBvD,CAAC"}

package/dist/material/components/ap-chat/components/input/tiptap/resource-chip-node-view.js

@@ -2,16 +2,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLingui } from "@lingui/react";
 import { styled } from "@mui/material/styles";
 import { NodeViewWrapper } from "@tiptap/react";
-import apollo_core from "@uipath/apollo-core";
+import apollo_core, { Typography } from "@uipath/apollo-core";
 import react from "react";
 import { useChatState } from "../../../providers/chat-state-provider.js";
 import { CHAT_RESOURCE_CHIP_MAX_WIDTH } from "../../../service/index.js";
+import { fontByVariant } from "../../../utils/font-by-variant.js";
 import { AutopilotChatActionButton } from "../../common/action-button.js";
 import { AutopilotChatTooltip } from "../../common/tooltip.js";
 const ChipContent = styled('span')(({ theme, readonly })=>({
         display: 'inline-flex',
         alignItems: 'center',
-        gap: apollo_core.Spacing.SpacingMicro,
         padding: `0 ${apollo_core.Padding.PadS}`,
         backgroundColor: theme.palette.semantic.colorPrimaryLighter,
         color: theme.palette.semantic.colorForeground,
@@ -33,7 +33,8 @@ const ChipLabel = styled('span')(()=>({
         fontWeight: apollo_core.FontFamily.FontWeightSemibold,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        padding: `0 ${apollo_core.Padding.PadS}`
     }));
 const ChipDeleteContainer = styled('span')(({ visible, compactMode, theme })=>({
         opacity: visible ? 1 : 0,
@@ -46,7 +47,7 @@ const ChipDeleteContainer = styled('span')(({ visible, compactMode, theme })=>({
         backgroundColor: theme.palette.semantic.colorPrimaryLighter,
         borderRadius: `calc(${apollo_core.Border.BorderRadiusL} * 2)`,
         transition: 'opacity 0.15s ease-in-out',
-        '& .MuiButtonBase-root': {
+        '& .MuiButtonBase-root.MuiButtonBase-root': {
             height: compactMode ? apollo_core.Spacing.SpacingS : apollo_core.Spacing.SpacingM,
             width: compactMode ? apollo_core.Spacing.SpacingS : apollo_core.Spacing.SpacingM,
             padding: 0,
@@ -117,8 +118,16 @@ const ResourceChipBase = /*#__PURE__*/ react.memo(ResourceChipBaseInner);
 ResourceChipBase.displayName = 'ResourceChipBase';
 const ResourceChipNodeView = /*#__PURE__*/ react.memo(({ node, deleteNode })=>{
     const { label, icon } = node.attrs;
+    const { spacing } = useChatState();
+    const lineHeight = fontByVariant(spacing.primaryFontToken)?.lineHeight ?? Typography.fontSizeM.lineHeight;
     return /*#__PURE__*/ jsx(NodeViewWrapper, {
         as: "span",
+        style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            height: lineHeight,
+            verticalAlign: 'top'
+        },
         children: /*#__PURE__*/ jsx(ResourceChipBase, {
             label: label,
             icon: icon,