@uipath/apollo-react 3.26.1-pr170.dbcf8c9 → 3.26.2-pr202.089892a

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

@@ -1 +1 @@
-{"version":3,"file":"chat-input-resource-picker.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/input/chat-input-resource-picker.tsx"],"names":[],"mappings":"AAQA,OAAO,KASN,MAAM,OAAO,CAAC;AAiWf,MAAM,WAAW,4BAA4B;IAC3C,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;CAClD;AAwJD,eAAO,MAAM,sBAAsB,wFAAsD,CAAC"}
+{"version":3,"file":"chat-input-resource-picker.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/input/chat-input-resource-picker.tsx"],"names":[],"mappings":"AAQA,OAAO,KASN,MAAM,OAAO,CAAC;AAoIf,MAAM,WAAW,4BAA4B;IAC3C,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;CAClD;AA0SD,eAAO,MAAM,sBAAsB,wFAAsD,CAAC"}

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

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useLingui } from "@lingui/react";
 import CircularProgress from "@mui/material/CircularProgress";
 import Menu from "@mui/material/Menu";
@@ -7,11 +7,10 @@ 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_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 { 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 { AutopilotChatIconButton } from "../common/icon-button.js";
 import { AutopilotChatTooltip } from "../common/tooltip.js";
 const ellipsisStyle = {
@@ -47,6 +46,12 @@ 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',
@@ -57,57 +62,17 @@ const DrillDownHeader = styled('div')(({ theme })=>({
 const SkeletonItem = styled(StyledMenuItem)({
     pointerEvents: 'none'
 });
-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 chat_input_resource_picker_ResourceMenuItem = /*#__PURE__*/ react.memo(function({ item, isSelected, onItemClick, tooltipPlacement, fontToken }) {
     const isCategory = isResourceSelector(item);
     const tooltipContent = item.tooltip;
-    const isKeyboardSelected = isSelected && 'keyboard' === navigationMode;
+    const handleClick = useCallback(()=>onItemClick(item), [
+        onItemClick,
+        item
+    ]);
     const menuItem = /*#__PURE__*/ jsxs(StyledMenuItem, {
         id: `resource-item-${item.id}`,
         selected: isSelected,
-        onClick: ()=>handleItemClick(item),
-        onMouseEnter: ()=>onMouseEnterItem(index),
-        style: style,
-        ...ariaAttributes,
+        onClick: handleClick,
         children: [
             /*#__PURE__*/ jsxs(ResourceItemContent, {
                 children: [
@@ -138,167 +103,49 @@ const VirtualizedResourceRow = ({ index, style, ariaAttributes, items, selectedI
             children: tooltipContent
         }),
         placement: tooltipPlacement,
-        open: isKeyboardSelected ? true : void 0,
-        enterDelay: isKeyboardSelected ? 0 : CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
-        enterNextDelay: isKeyboardSelected ? 0 : CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
+        open: isSelected ? true : void 0,
+        enterDelay: isSelected ? 0 : CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
+        enterNextDelay: isSelected ? 0 : CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
         children: menuItem
     });
-};
-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();
+});
+function ResourcePickerDropdownInner(_props, ref) {
+    const { isOpen, anchorPosition, displayedItems, drillDown, query, loading, loadingMore, searchInProgress, hasMore, error, previousDisplayCount, handleItemClick, close, goBackOrClose, retryLoad, loadMore } = useAutopilotChatResourcePicker();
     const { theming, spacing } = useChatState();
+    const listRef = useRef(null);
+    const isOpenRef = useRef(isOpen);
+    isOpenRef.current = isOpen;
     const { _ } = useLingui();
-    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,
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const scrollStateRef = useRef({
         hasMore,
         loadingMore,
-        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
-        ]
+        loadMore,
+        scrollTop: 0,
+        container: null
     });
-    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');
+    scrollStateRef.current.hasMore = hasMore;
+    scrollStateRef.current.loadingMore = loadingMore;
+    scrollStateRef.current.loadMore = loadMore;
     const prevStateRef = useRef({
         query,
-        drillDownId: drillDown?.category?.id
+        drillDownId: drillDown?.category?.id,
+        selectedIndex,
+        loadingMore
     });
+    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);
-            setNavigationMode('none');
-        }
+        if (prev.query !== query || prev.drillDownId !== currentDrillDownId) setSelectedIndex(0);
         prev.query = query;
         prev.drillDownId = currentDrillDownId;
     }, [
@@ -306,42 +153,44 @@ function ResourcePickerDropdownInner(_props, ref) {
         drillDown
     ]);
     useEffect(()=>{
-        if (isOpen) {
-            setSelectedIndex(0);
-            setNavigationMode('none');
+        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'
+            });
         }
     }, [
-        isOpen
+        selectedIndex,
+        displayedItems
     ]);
-    useEffect(()=>{
-        if ('keyboard' === navigationMode) virtualListRef.current?.scrollToRow({
-            index: selectedIndex,
-            align: 'auto'
-        });
+    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;
+        }
     }, [
-        selectedIndex,
-        navigationMode,
-        virtualListRef
+        loadingMore
     ]);
     const navigateUp = useCallback(()=>{
         setSelectedIndex((prev)=>Math.max(prev - 1, 0));
-        setNavigationMode('keyboard');
     }, []);
     const navigateDown = useCallback(()=>{
-        setSelectedIndex((prev)=>Math.min(prev + 1, items.length - 1));
-        setNavigationMode('keyboard');
+        setSelectedIndex((prev)=>Math.min(prev + 1, displayedItems.length - 1));
     }, [
-        items.length
+        displayedItems.length
     ]);
-    const handleMouseEnterItem = useCallback((index)=>{
-        setSelectedIndex(index);
-        setNavigationMode('pointer');
-    }, []);
     const selectItem = useCallback(()=>{
-        const selectedItem = items[selectedIndex];
+        const selectedItem = displayedItems[selectedIndex];
         if (selectedItem) handleItemClick(selectedItem);
     }, [
-        items,
+        displayedItems,
         selectedIndex,
         handleItemClick
     ]);
@@ -364,7 +213,7 @@ function ResourcePickerDropdownInner(_props, ref) {
                         return true;
                     case 'Escape':
                         event.preventDefault();
-                        drillDown ? goBackOrClose() : close();
+                        goBackOrClose();
                         return true;
                     default:
                         return false;
@@ -374,23 +223,138 @@ function ResourcePickerDropdownInner(_props, ref) {
         navigateDown,
         navigateUp,
         selectItem,
-        goBackOrClose,
-        drillDown,
-        close
+        goBackOrClose
     ]);
-    const handleMenuClose = useCallback((_event, reason)=>{
-        if ('escapeKeyDown' === reason && drillDown) return void goBackOrClose();
-        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");
     }, [
         drillDown,
         goBackOrClose,
-        close
+        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
     ]);
     return /*#__PURE__*/ jsx(Menu, {
         open: isOpen,
         anchorReference: "anchorPosition",
         anchorPosition: anchorPosition ?? void 0,
-        onClose: handleMenuClose,
+        onClose: close,
         anchorOrigin: {
             vertical: 'top',
             horizontal: 'left'
@@ -406,17 +370,10 @@ function ResourcePickerDropdownInner(_props, ref) {
                 id: 'autopilot-chat.resource-picker.label'
             }),
             dense: true,
-            disableListWrap: true,
-            onMouseDown: preventDefaultMouseDown
+            ref: listRef
         },
-        slotProps: MENU_SLOT_PROPS,
-        children: /*#__PURE__*/ jsx(chat_input_resource_picker_MenuContent, {
-            virtualListRef: virtualListRef,
-            selectedIndex: selectedIndex,
-            navigationMode: navigationMode,
-            onMouseEnterItem: handleMouseEnterItem,
-            onItemClick: handleItemClick
-        })
+        slotProps: menuSlotProps,
+        children: menuContent
     });
 }
 const ResourcePickerDropdown = /*#__PURE__*/ react.memo(/*#__PURE__*/ forwardRef(ResourcePickerDropdownInner));

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

@@ -245,7 +245,8 @@ function AutopilotChatInputComponent() {
                                     onKeyDown: handleKeyDown,
                                     minRows: spacing.promptBox.minRows,
                                     maxRows: spacing.promptBox.maxRows,
-                                    lineHeight: editorLineHeight
+                                    lineHeight: editorLineHeight,
+                                    anchorEl: inputContainerRef.current
                                 })
                             }),
                             /*#__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,4CAsNnC;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,4CAuNnC;AAED,eAAO,MAAM,kBAAkB,+DAA0C,CAAC"}

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

@@ -206,7 +206,8 @@ function AutopilotChatInputComponent() {
                                     onKeyDown: handleKeyDown,
                                     minRows: spacing.promptBox.minRows,
                                     maxRows: spacing.promptBox.maxRows,
-                                    lineHeight: editorLineHeight
+                                    lineHeight: editorLineHeight,
+                                    anchorEl: inputContainerRef.current
                                 })
                             }),
                             /*#__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,8 +73,7 @@ const ChipLabel = (0, styles_namespaceObject.styled)('span')(()=>({
         fontWeight: apollo_core_default().FontFamily.FontWeightSemibold,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        padding: `0 ${apollo_core_default().Padding.PadS}`
+        whiteSpace: 'nowrap'
     }));
 const ChipDeleteContainer = (0, styles_namespaceObject.styled)('span')(({ visible, compactMode, theme })=>({
         opacity: visible ? 1 : 0,
@@ -87,7 +86,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,
@@ -158,16 +157,8 @@ 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;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"}
+{"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"}