@uipath/apollo-react 3.27.0 → 3.28.0-pr203.a685fc2

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

@@ -44,13 +44,16 @@ 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 { isOpen, drillDown, open, close, setQuery } = (0, resource_picker_provider_cjs_namespaceObject.useAutopilotChatResourcePicker)();
-    const isOpenRef = (0, external_react_namespaceObject.useRef)(isOpen);
+    const { isOpenRef, drillDown, open, close, handleMentionEnd, setQuery } = (0, resource_picker_provider_cjs_namespaceObject.useAutopilotChatResourcePicker)();
     const drillDownRef = (0, external_react_namespaceObject.useRef)(drillDown);
     const valueRef = (0, external_react_namespaceObject.useRef)(value);
-    isOpenRef.current = isOpen;
-    drillDownRef.current = drillDown;
-    valueRef.current = value;
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
+        drillDownRef.current = drillDown;
+        valueRef.current = value;
+    }, [
+        drillDown,
+        value
+    ]);
     const handleChange = (0, external_react_namespaceObject.useCallback)((newValue)=>{
         if (isOpenRef.current && drillDownRef.current && !newValue.includes('@')) close();
         onChange(newValue);
@@ -90,7 +93,7 @@ const chat_input_editor_EditorWithPicker = /*#__PURE__*/ (0, external_react_name
                 onChange: handleChange,
                 onKeyDown: handleKeyDown,
                 onMentionStart: open,
-                onMentionEnd: close,
+                onMentionEnd: handleMentionEnd,
                 onMentionQueryChange: setQuery
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_chat_input_resource_picker_cjs_namespaceObject.ResourcePickerDropdown, {
@@ -108,9 +111,13 @@ 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,7 +11,6 @@ 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,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"}
+{"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"}

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

@@ -1,18 +1,21 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import react, { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import react, { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, 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 { isOpen, drillDown, open, close, setQuery } = useAutopilotChatResourcePicker();
-    const isOpenRef = useRef(isOpen);
+    const { isOpenRef, drillDown, open, close, handleMentionEnd, setQuery } = useAutopilotChatResourcePicker();
     const drillDownRef = useRef(drillDown);
     const valueRef = useRef(value);
-    isOpenRef.current = isOpen;
-    drillDownRef.current = drillDown;
-    valueRef.current = value;
+    useLayoutEffect(()=>{
+        drillDownRef.current = drillDown;
+        valueRef.current = value;
+    }, [
+        drillDown,
+        value
+    ]);
     const handleChange = useCallback((newValue)=>{
         if (isOpenRef.current && drillDownRef.current && !newValue.includes('@')) close();
         onChange(newValue);
@@ -52,7 +55,7 @@ const chat_input_editor_EditorWithPicker = /*#__PURE__*/ forwardRef(function(pro
                 onChange: handleChange,
                 onKeyDown: handleKeyDown,
                 onMentionStart: open,
-                onMentionEnd: close,
+                onMentionEnd: handleMentionEnd,
                 onMentionQueryChange: setQuery
             }),
             /*#__PURE__*/ jsx(ResourcePickerDropdown, {
@@ -70,9 +73,13 @@ 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,6 +49,7 @@ 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");
@@ -88,12 +89,6 @@ 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',
@@ -104,17 +99,57 @@ const DrillDownHeader = (0, styles_namespaceObject.styled)('div')(({ theme })=>(
 const SkeletonItem = (0, styles_namespaceObject.styled)(StyledMenuItem)({
     pointerEvents: 'none'
 });
-const chat_input_resource_picker_ResourceMenuItem = /*#__PURE__*/ external_react_default().memo(function({ item, isSelected, onItemClick, tooltipPlacement, fontToken }) {
+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 isCategory = (0, resource_picker_provider_cjs_namespaceObject.isResourceSelector)(item);
     const tooltipContent = item.tooltip;
-    const handleClick = (0, external_react_namespaceObject.useCallback)(()=>onItemClick(item), [
-        onItemClick,
-        item
-    ]);
+    const isKeyboardSelected = isSelected && 'keyboard' === navigationMode;
     const menuItem = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(StyledMenuItem, {
         id: `resource-item-${item.id}`,
         selected: isSelected,
-        onClick: handleClick,
+        onClick: ()=>handleItemClick(item),
+        onMouseEnter: ()=>onMouseEnterItem(index),
+        style: style,
+        ...ariaAttributes,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ResourceItemContent, {
                 children: [
@@ -145,49 +180,167 @@ const chat_input_resource_picker_ResourceMenuItem = /*#__PURE__*/ external_react
             children: tooltipContent
         }),
         placement: tooltipPlacement,
-        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,
+        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,
         children: menuItem
     });
-});
-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 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)();
     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 [selectedIndex, setSelectedIndex] = (0, external_react_namespaceObject.useState)(0);
-    const scrollStateRef = (0, external_react_namespaceObject.useRef)({
+    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,
         hasMore,
         loadingMore,
-        loadMore,
-        scrollTop: 0,
-        container: null
+        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
+                }
+            })
+        ]
     });
-    scrollStateRef.current.hasMore = hasMore;
-    scrollStateRef.current.loadingMore = loadingMore;
-    scrollStateRef.current.loadMore = loadMore;
+});
+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');
     const prevStateRef = (0, external_react_namespaceObject.useRef)({
         query,
-        drillDownId: drillDown?.category?.id,
-        selectedIndex,
-        loadingMore
+        drillDownId: drillDown?.category?.id
     });
-    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);
+        if (prev.query !== query || prev.drillDownId !== currentDrillDownId) {
+            setSelectedIndex(0);
+            setNavigationMode('none');
+        }
         prev.query = query;
         prev.drillDownId = currentDrillDownId;
     }, [
@@ -195,44 +348,42 @@ function ResourcePickerDropdownInner(_props, ref) {
         drillDown
     ]);
     (0, external_react_namespaceObject.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
     ]);
-    (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;
-        }
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if ('keyboard' === navigationMode) virtualListRef.current?.scrollToRow({
+            index: selectedIndex,
+            align: 'auto'
+        });
     }, [
-        loadingMore
+        selectedIndex,
+        navigationMode,
+        virtualListRef
     ]);
     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, displayedItems.length - 1));
+        setSelectedIndex((prev)=>Math.min(prev + 1, items.length - 1));
+        setNavigationMode('keyboard');
     }, [
-        displayedItems.length
+        items.length
     ]);
+    const handleMouseEnterItem = (0, external_react_namespaceObject.useCallback)((index)=>{
+        setSelectedIndex(index);
+        setNavigationMode('pointer');
+    }, []);
     const selectItem = (0, external_react_namespaceObject.useCallback)(()=>{
-        const selectedItem = displayedItems[selectedIndex];
+        const selectedItem = items[selectedIndex];
         if (selectedItem) handleItemClick(selectedItem);
     }, [
-        displayedItems,
+        items,
         selectedIndex,
         handleItemClick
     ]);
@@ -255,7 +406,7 @@ function ResourcePickerDropdownInner(_props, ref) {
                         return true;
                     case 'Escape':
                         event.preventDefault();
-                        goBackOrClose();
+                        drillDown ? goBackOrClose() : close();
                         return true;
                     default:
                         return false;
@@ -265,138 +416,23 @@ function ResourcePickerDropdownInner(_props, ref) {
         navigateDown,
         navigateUp,
         selectItem,
-        goBackOrClose
+        goBackOrClose,
+        drillDown,
+        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");
+    const handleMenuClose = (0, external_react_namespaceObject.useCallback)((_event, reason)=>{
+        if ('escapeKeyDown' === reason && drillDown) return void goBackOrClose();
+        close();
     }, [
         drillDown,
         goBackOrClose,
-        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
+        close
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Menu_default(), {
         open: isOpen,
         anchorReference: "anchorPosition",
         anchorPosition: anchorPosition ?? void 0,
-        onClose: close,
+        onClose: handleMenuClose,
         anchorOrigin: {
             vertical: 'top',
             horizontal: 'left'
@@ -412,10 +448,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__*/ (0, jsx_runtime_namespaceObject.jsx)(chat_input_resource_picker_MenuContent, {
+            virtualListRef: virtualListRef,
+            selectedIndex: selectedIndex,
+            navigationMode: navigationMode,
+            onMouseEnterItem: handleMouseEnterItem,
+            onItemClick: handleItemClick
+        })
     });
 }
 const ResourcePickerDropdown = /*#__PURE__*/ external_react_default().memo(/*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(ResourcePickerDropdownInner));

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;AAoIf,MAAM,WAAW,4BAA4B;IAC3C,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;CAClD;AA0SD,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;AAiWf,MAAM,WAAW,4BAA4B;IAC3C,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;CAClD;AAwJD,eAAO,MAAM,sBAAsB,wFAAsD,CAAC"}