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

package/README.md

@@ -68,6 +68,8 @@ pnpm add @uipath/apollo-react
 yarn add @uipath/apollo-react
 ```
 
+**Note:** This package is published to both npm and GitHub Package Registry. External users will automatically pull from npm. Internal UiPath users with `.npmrc` configured will automatically pull from GitHub Package Registry.
+
 ## Quick Start
 
 ### Apollo Themes with Standard Material UI

package/dist/canvas/icons/CaseManagementProject.cjs

@@ -33,7 +33,7 @@ const CaseManagementProject = ({ w = 22, h = 22 })=>/*#__PURE__*/ (0, jsx_runtim
         width: w,
         height: h,
         fill: "none",
-        viewBox: "0 0 22 22",
+        viewBox: "0 0 16 16",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
                 fill: "currentColor",

package/dist/canvas/icons/CaseManagementProject.js

@@ -5,7 +5,7 @@ const CaseManagementProject = ({ w = 22, h = 22 })=>/*#__PURE__*/ jsxs("svg", {
         width: w,
         height: h,
         fill: "none",
-        viewBox: "0 0 22 22",
+        viewBox: "0 0 16 16",
         children: [
             /*#__PURE__*/ jsx("path", {
                 fill: "currentColor",

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

@@ -44,16 +44,13 @@ const index_cjs_namespaceObject = require("./tiptap/index.cjs");
 const chat_input_editor_EditorWithPicker = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function(props, ref) {
     const { value, placeholder, minRows, maxRows, lineHeight, onChange, onKeyDown, editorRef } = props;
     const dropdownRef = (0, external_react_namespaceObject.useRef)(null);
-    const { isOpenRef, drillDown, open, close, handleMentionEnd, setQuery } = (0, resource_picker_provider_cjs_namespaceObject.useAutopilotChatResourcePicker)();
+    const { isOpen, drillDown, open, close, setQuery } = (0, resource_picker_provider_cjs_namespaceObject.useAutopilotChatResourcePicker)();
+    const isOpenRef = (0, external_react_namespaceObject.useRef)(isOpen);
     const drillDownRef = (0, external_react_namespaceObject.useRef)(drillDown);
     const valueRef = (0, external_react_namespaceObject.useRef)(value);
-    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
-        drillDownRef.current = drillDown;
-        valueRef.current = value;
-    }, [
-        drillDown,
-        value
-    ]);
+    isOpenRef.current = isOpen;
+    drillDownRef.current = drillDown;
+    valueRef.current = value;
     const handleChange = (0, external_react_namespaceObject.useCallback)((newValue)=>{
         if (isOpenRef.current && drillDownRef.current && !newValue.includes('@')) close();
         onChange(newValue);
@@ -93,7 +90,7 @@ const chat_input_editor_EditorWithPicker = /*#__PURE__*/ (0, external_react_name
                 onChange: handleChange,
                 onKeyDown: handleKeyDown,
                 onMentionStart: open,
-                onMentionEnd: handleMentionEnd,
+                onMentionEnd: close,
                 onMentionQueryChange: setQuery
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_chat_input_resource_picker_cjs_namespaceObject.ResourcePickerDropdown, {
@@ -111,13 +108,9 @@ const chat_input_editor_ChatInputEditor = /*#__PURE__*/ external_react_default()
     const handleDrillDown = (0, external_react_namespaceObject.useCallback)(()=>{
         editorRef.current?.clearMentionQuery();
     }, []);
-    const handleClose = (0, external_react_namespaceObject.useCallback)(()=>{
-        editorRef.current?.exitMention();
-    }, []);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(resource_picker_provider_cjs_namespaceObject.AutopilotChatResourcePickerProvider, {
         onResourceSelect: handleResourceSelect,
         onDrillDown: handleDrillDown,
-        onClose: handleClose,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(chat_input_editor_EditorWithPicker, {
             ...props,
             ref: ref,

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

@@ -11,6 +11,7 @@ export interface ChatInputEditorProps {
     minRows: number;
     maxRows: number;
     lineHeight?: string;
+    anchorEl: HTMLElement | null;
     onChange: (value: string) => void;
     onKeyDown?: (event: KeyboardEvent) => boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"chat-input-editor.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/input/chat-input-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAYf,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,oBAAoB,EAAE,MAAM,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;CAC/C;AAqFD,eAAO,MAAM,eAAe,+FA8B3B,CAAC"}
+{"version":3,"file":"chat-input-editor.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/input/chat-input-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAYpF,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,oBAAoB,EAAE,MAAM,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;CAC/C;AAiFD,eAAO,MAAM,eAAe,+FAyB3B,CAAC"}

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

@@ -1,21 +1,18 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import react, { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useRef } from "react";
+import react, { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 import { AutopilotChatResourcePickerProvider, useAutopilotChatResourcePicker } from "../../providers/resource-picker-provider.js";
 import { ResourcePickerDropdown } from "./chat-input-resource-picker.js";
 import { TipTapEditor } from "./tiptap/index.js";
 const chat_input_editor_EditorWithPicker = /*#__PURE__*/ forwardRef(function(props, ref) {
     const { value, placeholder, minRows, maxRows, lineHeight, onChange, onKeyDown, editorRef } = props;
     const dropdownRef = useRef(null);
-    const { isOpenRef, drillDown, open, close, handleMentionEnd, setQuery } = useAutopilotChatResourcePicker();
+    const { isOpen, drillDown, open, close, setQuery } = useAutopilotChatResourcePicker();
+    const isOpenRef = useRef(isOpen);
     const drillDownRef = useRef(drillDown);
     const valueRef = useRef(value);
-    useLayoutEffect(()=>{
-        drillDownRef.current = drillDown;
-        valueRef.current = value;
-    }, [
-        drillDown,
-        value
-    ]);
+    isOpenRef.current = isOpen;
+    drillDownRef.current = drillDown;
+    valueRef.current = value;
     const handleChange = useCallback((newValue)=>{
         if (isOpenRef.current && drillDownRef.current && !newValue.includes('@')) close();
         onChange(newValue);
@@ -55,7 +52,7 @@ const chat_input_editor_EditorWithPicker = /*#__PURE__*/ forwardRef(function(pro
                 onChange: handleChange,
                 onKeyDown: handleKeyDown,
                 onMentionStart: open,
-                onMentionEnd: handleMentionEnd,
+                onMentionEnd: close,
                 onMentionQueryChange: setQuery
             }),
             /*#__PURE__*/ jsx(ResourcePickerDropdown, {
@@ -73,13 +70,9 @@ const chat_input_editor_ChatInputEditor = /*#__PURE__*/ react.memo(/*#__PURE__*/
     const handleDrillDown = useCallback(()=>{
         editorRef.current?.clearMentionQuery();
     }, []);
-    const handleClose = useCallback(()=>{
-        editorRef.current?.exitMention();
-    }, []);
     return /*#__PURE__*/ jsx(AutopilotChatResourcePickerProvider, {
         onResourceSelect: handleResourceSelect,
         onDrillDown: handleDrillDown,
-        onClose: handleClose,
         children: /*#__PURE__*/ jsx(chat_input_editor_EditorWithPicker, {
             ...props,
             ref: ref,

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

@@ -49,7 +49,6 @@ var apollo_core_default = /*#__PURE__*/ __webpack_require__.n(apollo_core_namesp
 const external_index_cjs_namespaceObject = require("../../../../index.cjs");
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
-const external_react_window_namespaceObject = require("react-window");
 const index_cjs_namespaceObject = require("../../../ap-skeleton/index.cjs");
 const chat_state_provider_cjs_namespaceObject = require("../../providers/chat-state-provider.cjs");
 const resource_picker_provider_cjs_namespaceObject = require("../../providers/resource-picker-provider.cjs");
@@ -89,6 +88,12 @@ const EmptyContainer = (0, styles_namespaceObject.styled)('div')(({ theme })=>({
         padding: `${apollo_core_default().Padding.PadXxl} ${apollo_core_default().Padding.PadXxxl}`,
         color: theme.palette.semantic.colorForegroundDeEmp
     }));
+const LoadMoreContainer = (0, styles_namespaceObject.styled)('div')({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: apollo_core_default().Padding.PadXxl
+});
 const DrillDownHeader = (0, styles_namespaceObject.styled)('div')(({ theme })=>({
         display: 'flex',
         alignItems: 'center',
@@ -99,57 +104,17 @@ const DrillDownHeader = (0, styles_namespaceObject.styled)('div')(({ theme })=>(
 const SkeletonItem = (0, styles_namespaceObject.styled)(StyledMenuItem)({
     pointerEvents: 'none'
 });
-const StyledResourceList = (0, styles_namespaceObject.styled)(external_react_window_namespaceObject.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: external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_MENU_WIDTH,
-            maxHeight: external_service_index_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        style: {
-            ...style,
-            ...loaderRowStyle
-        },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CircularProgress_default(), {
-            size: 20
-        })
-    });
-    const item = items[index];
-    const isSelected = index === selectedIndex;
+const chat_input_resource_picker_ResourceMenuItem = /*#__PURE__*/ external_react_default().memo(function({ item, isSelected, onItemClick, tooltipPlacement, fontToken }) {
     const isCategory = (0, resource_picker_provider_cjs_namespaceObject.isResourceSelector)(item);
     const tooltipContent = item.tooltip;
-    const isKeyboardSelected = isSelected && 'keyboard' === navigationMode;
+    const handleClick = (0, external_react_namespaceObject.useCallback)(()=>onItemClick(item), [
+        onItemClick,
+        item
+    ]);
     const menuItem = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(StyledMenuItem, {
         id: `resource-item-${item.id}`,
         selected: isSelected,
-        onClick: ()=>handleItemClick(item),
-        onMouseEnter: ()=>onMouseEnterItem(index),
-        style: style,
-        ...ariaAttributes,
+        onClick: handleClick,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ResourceItemContent, {
                 children: [
@@ -180,167 +145,49 @@ const VirtualizedResourceRow = ({ index, style, ariaAttributes, items, selectedI
             children: tooltipContent
         }),
         placement: tooltipPlacement,
-        open: isKeyboardSelected ? true : void 0,
-        enterDelay: isKeyboardSelected ? 0 : external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
-        enterNextDelay: isKeyboardSelected ? 0 : external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
+        open: isSelected ? true : void 0,
+        enterDelay: isSelected ? 0 : external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
+        enterNextDelay: isSelected ? 0 : external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_TOOLTIP_ENTER_DELAY,
         children: menuItem
     });
-};
-const chat_input_resource_picker_MenuContent = /*#__PURE__*/ external_react_default().memo(function({ virtualListRef, selectedIndex, navigationMode, onMouseEnterItem, onItemClick }) {
-    const { displayedItems: items, drillDown, query, loading, loadingMore, searchInProgress, hasMore, error, previousDisplayCount, goBackOrClose, retryLoad, loadMore } = (0, resource_picker_provider_cjs_namespaceObject.useAutopilotChatResourcePicker)();
+});
+function ResourcePickerDropdownInner(_props, ref) {
+    const { isOpen, anchorPosition, displayedItems, drillDown, query, loading, loadingMore, searchInProgress, hasMore, error, previousDisplayCount, handleItemClick, close, goBackOrClose, retryLoad, loadMore } = (0, resource_picker_provider_cjs_namespaceObject.useAutopilotChatResourcePicker)();
     const { theming, spacing } = (0, chat_state_provider_cjs_namespaceObject.useChatState)();
+    const listRef = (0, external_react_namespaceObject.useRef)(null);
+    const isOpenRef = (0, external_react_namespaceObject.useRef)(isOpen);
+    isOpenRef.current = isOpen;
     const { _ } = (0, react_namespaceObject.useLingui)();
-    const drillDownHeaderRef = (0, external_react_namespaceObject.useRef)(null);
-    const [drillDownHeaderHeight, setDrillDownHeaderHeight] = (0, external_react_namespaceObject.useState)(0);
-    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
-        if (!drillDown) return void setDrillDownHeaderHeight(0);
-        setDrillDownHeaderHeight(drillDownHeaderRef.current?.offsetHeight ?? 0);
-    }, [
-        drillDown
-    ]);
-    const handleRowsRendered = (0, external_react_namespaceObject.useCallback)((visibleRows, _allRows)=>{
-        if (!hasMore || loadingMore) return;
-        if (visibleRows.stopIndex >= items.length - external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_LOAD_MORE_THRESHOLD) loadMore();
-    }, [
-        items.length,
+    const [selectedIndex, setSelectedIndex] = (0, external_react_namespaceObject.useState)(0);
+    const scrollStateRef = (0, external_react_namespaceObject.useRef)({
         hasMore,
         loadingMore,
-        loadMore
-    ]);
-    const tooltipPlacement = theming?.chatMenu?.groupItemTooltipPlacement ?? 'left';
-    const isLoadingState = loading || searchInProgress;
-    const skeletonElements = (0, external_react_namespaceObject.useMemo)(()=>{
-        const skeletonCount = Math.min(Math.max(previousDisplayCount, external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_MIN_SKELETON_COUNT), external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_MAX_SKELETON_COUNT);
-        return Array.from({
-            length: skeletonCount
-        }).map((_, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SkeletonItem, {
-                disabled: true,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApSkeleton, {})
-            }, `skeleton-${index}`));
-    }, [
-        previousDisplayCount
-    ]);
-    const rowCount = items.length + (loadingMore ? 1 : 0);
-    const listHeight = Math.min(external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_MENU_MAX_HEIGHT - drillDownHeaderHeight, rowCount * external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_ITEM_HEIGHT);
-    const rowProps = (0, external_react_namespaceObject.useMemo)(()=>({
-            items,
-            selectedIndex,
-            navigationMode,
-            handleItemClick: onItemClick,
-            onMouseEnterItem,
-            tooltipPlacement,
-            fontToken: spacing.primaryFontToken
-        }), [
-        items,
-        selectedIndex,
-        navigationMode,
-        onItemClick,
-        onMouseEnterItem,
-        tooltipPlacement,
-        spacing.primaryFontToken
-    ]);
-    const drillDownHeader = drillDown ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(DrillDownHeader, {
-        ref: drillDownHeaderRef,
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_button_cjs_namespaceObject.AutopilotChatIconButton, {
-                size: "small",
-                onClick: goBackOrClose,
-                "aria-label": _({
-                    id: 'autopilot-chat.resource-picker.back'
-                }),
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ApIcon, {
-                    variant: "outlined",
-                    name: "arrow_back",
-                    size: apollo_core_default().Icon.IconXs
-                })
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ApTypography, {
-                variant: spacing.primaryBoldFontToken,
-                style: ellipsisStyle,
-                children: drillDown.category.displayName
-            })
-        ]
-    }) : null;
-    if (isLoadingState) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-        children: [
-            drillDownHeader,
-            skeletonElements
-        ]
-    });
-    if (error) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-        children: [
-            drillDownHeader,
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ErrorContainer, {
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ApTypography, {
-                        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
-                        children: error
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-            children: [
-                drillDownHeader,
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EmptyContainer, {
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ApTypography, {
-                        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
-                        children: emptyMessage
-                    })
-                })
-            ]
-        });
-    }
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-        children: [
-            drillDownHeader,
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledResourceList, {
-                listRef: virtualListRef,
-                rowProps: rowProps,
-                rowComponent: VirtualizedResourceRow,
-                rowCount: rowCount,
-                rowHeight: external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_ITEM_HEIGHT,
-                overscanCount: 5,
-                onRowsRendered: handleRowsRendered,
-                style: {
-                    height: listHeight
-                }
-            })
-        ]
+        loadMore,
+        scrollTop: 0,
+        container: null
     });
-});
-function ResourcePickerDropdownInner(_props, ref) {
-    const { isOpen, isOpenRef, anchorPosition, displayedItems: items, drillDown, query, handleItemClick, close, goBackOrClose } = (0, resource_picker_provider_cjs_namespaceObject.useAutopilotChatResourcePicker)();
-    const virtualListRef = (0, external_react_window_namespaceObject.useListRef)(null);
-    const { _ } = (0, react_namespaceObject.useLingui)();
-    const [selectedIndex, setSelectedIndex] = (0, external_react_namespaceObject.useState)(0);
-    const [navigationMode, setNavigationMode] = (0, external_react_namespaceObject.useState)('none');
+    scrollStateRef.current.hasMore = hasMore;
+    scrollStateRef.current.loadingMore = loadingMore;
+    scrollStateRef.current.loadMore = loadMore;
     const prevStateRef = (0, external_react_namespaceObject.useRef)({
         query,
-        drillDownId: drillDown?.category?.id
+        drillDownId: drillDown?.category?.id,
+        selectedIndex,
+        loadingMore
     });
+    const handleScroll = (0, external_react_namespaceObject.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 < external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_SCROLL_THRESHOLD;
+        if (nearBottom) state.loadMore();
+    }, []);
     (0, external_react_namespaceObject.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;
     }, [
@@ -348,42 +195,44 @@ function ResourcePickerDropdownInner(_props, ref) {
         drillDown
     ]);
     (0, external_react_namespaceObject.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
     ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if ('keyboard' === navigationMode) virtualListRef.current?.scrollToRow({
-            index: selectedIndex,
-            align: 'auto'
-        });
+    (0, external_react_namespaceObject.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 = (0, external_react_namespaceObject.useCallback)(()=>{
         setSelectedIndex((prev)=>Math.max(prev - 1, 0));
-        setNavigationMode('keyboard');
     }, []);
     const navigateDown = (0, external_react_namespaceObject.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 = (0, external_react_namespaceObject.useCallback)((index)=>{
-        setSelectedIndex(index);
-        setNavigationMode('pointer');
-    }, []);
     const selectItem = (0, external_react_namespaceObject.useCallback)(()=>{
-        const selectedItem = items[selectedIndex];
+        const selectedItem = displayedItems[selectedIndex];
         if (selectedItem) handleItemClick(selectedItem);
     }, [
-        items,
+        displayedItems,
         selectedIndex,
         handleItemClick
     ]);
@@ -406,7 +255,7 @@ function ResourcePickerDropdownInner(_props, ref) {
                         return true;
                     case 'Escape':
                         event.preventDefault();
-                        drillDown ? goBackOrClose() : close();
+                        goBackOrClose();
                         return true;
                     default:
                         return false;
@@ -416,23 +265,138 @@ function ResourcePickerDropdownInner(_props, ref) {
         navigateDown,
         navigateUp,
         selectItem,
-        goBackOrClose,
-        drillDown,
-        close
+        goBackOrClose
     ]);
-    const handleMenuClose = (0, external_react_namespaceObject.useCallback)((_event, reason)=>{
-        if ('escapeKeyDown' === reason && drillDown) return void goBackOrClose();
-        close();
+    const tooltipPlacement = theming?.chatMenu?.groupItemTooltipPlacement ?? 'left';
+    const skeletonElements = (0, external_react_namespaceObject.useMemo)(()=>{
+        const skeletonCount = Math.min(Math.max(previousDisplayCount, external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_MIN_SKELETON_COUNT), external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_MAX_SKELETON_COUNT);
+        return Array.from({
+            length: skeletonCount
+        }).map((_, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SkeletonItem, {
+                disabled: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApSkeleton, {})
+            }, `skeleton-${index}`));
+    }, [
+        previousDisplayCount
+    ]);
+    const menuSlotProps = (0, external_react_namespaceObject.useMemo)(()=>({
+            paper: {
+                sx: {
+                    width: external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_MENU_WIDTH,
+                    maxHeight: external_service_index_cjs_namespaceObject.CHAT_RESOURCE_PICKER_MENU_MAX_HEIGHT,
+                    overflowY: 'auto'
+                },
+                onScroll: handleScroll
+            }
+        }), [
+        handleScroll
+    ]);
+    const isLoadingState = loading || searchInProgress;
+    const drillDownHeader = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!drillDown) return null;
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(DrillDownHeader, {
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_button_cjs_namespaceObject.AutopilotChatIconButton, {
+                    size: "small",
+                    onClick: goBackOrClose,
+                    "aria-label": _({
+                        id: 'autopilot-chat.resource-picker.back'
+                    }),
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ApIcon, {
+                        variant: "outlined",
+                        name: "arrow_back",
+                        size: apollo_core_default().Icon.IconXs
+                    })
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ApTypography, {
+                    variant: spacing.primaryBoldFontToken,
+                    style: ellipsisStyle,
+                    children: drillDown.category.displayName
+                })
+            ]
+        }, "drilldown-header");
     }, [
         drillDown,
         goBackOrClose,
-        close
+        spacing.primaryBoldFontToken,
+        _
+    ]);
+    const menuContent = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (isLoadingState) return [
+            drillDownHeader,
+            ...skeletonElements
+        ];
+        if (error) return [
+            drillDownHeader,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ErrorContainer, {
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ApTypography, {
+                        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+                        children: error
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(EmptyContainer, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ApTypography, {
+                        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+                        children: emptyMessage
+                    })
+                }, "empty")
+            ];
+        }
+        return [
+            drillDownHeader,
+            ...displayedItems.map((item, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(chat_input_resource_picker_ResourceMenuItem, {
+                    item: item,
+                    isSelected: index === selectedIndex,
+                    onItemClick: handleItemClick,
+                    tooltipPlacement: tooltipPlacement,
+                    fontToken: spacing.primaryFontToken
+                }, item.id)),
+            loadingMore && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LoadMoreContainer, {
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CircularProgress_default(), {
+                    size: 20
+                })
+            }, "loading-more")
+        ];
+    }, [
+        isLoadingState,
+        drillDownHeader,
+        skeletonElements,
+        error,
+        retryLoad,
+        _,
+        displayedItems,
+        query,
+        selectedIndex,
+        handleItemClick,
+        tooltipPlacement,
+        spacing.primaryFontToken,
+        loadingMore
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Menu_default(), {
         open: isOpen,
         anchorReference: "anchorPosition",
         anchorPosition: anchorPosition ?? void 0,
-        onClose: handleMenuClose,
+        onClose: close,
         anchorOrigin: {
             vertical: 'top',
             horizontal: 'left'
@@ -448,17 +412,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__*/ (0, jsx_runtime_namespaceObject.jsx)(chat_input_resource_picker_MenuContent, {
-            virtualListRef: virtualListRef,
-            selectedIndex: selectedIndex,
-            navigationMode: navigationMode,
-            onMouseEnterItem: handleMouseEnterItem,
-            onItemClick: handleItemClick
-        })
+        slotProps: menuSlotProps,
+        children: menuContent
     });
 }
 const ResourcePickerDropdown = /*#__PURE__*/ external_react_default().memo(/*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(ResourcePickerDropdownInner));