diff --git a/ee/tabby-ui/components/chat/popover-mention-list.tsx b/ee/tabby-ui/components/chat/popover-mention-list.tsx
new file mode 100644
index 000000000000..efe5a702160d
--- /dev/null
+++ b/ee/tabby-ui/components/chat/popover-mention-list.tsx
@@ -0,0 +1,130 @@
+import React, { useEffect, useRef } from 'react'
+
+import { MentionNodeAttrs, SourceItem } from './prompt-form-editor/types'
+
+interface PopoverMentionListProps {
+ items: SourceItem[]
+ selectedIndex: number
+ onUpdateSelectedIndex: (index: number) => void
+ handleItemSelection: (
+ item: SourceItem,
+ command?: (props: MentionNodeAttrs) => void
+ ) => void
+}
+
+// Maximum number of items visible in the list
+const MAX_VISIBLE_ITEMS = 4
+// Height of each item in pixels
+const ITEM_HEIGHT = 42
+
+export const PopoverMentionList: React.FC
= ({
+ items,
+ selectedIndex,
+ onUpdateSelectedIndex,
+ handleItemSelection
+}) => {
+ const selectedItemRef = useRef(null)
+ const containerRef = useRef(null)
+
+ // Dynamically calculate container height based on number of items
+ const containerHeight =
+ Math.min(items.length, MAX_VISIBLE_ITEMS) * ITEM_HEIGHT
+
+ // Scroll into view for the currently selected item
+ useEffect(() => {
+ const container = containerRef.current
+ const selectedItem = selectedItemRef.current
+ if (container && selectedItem) {
+ const containerTop = container.scrollTop
+ const containerBottom = containerTop + container.clientHeight
+ const itemTop = selectedItem.offsetTop
+ const itemBottom = itemTop + selectedItem.offsetHeight
+
+ if (itemTop < containerTop) {
+ container.scrollTop = itemTop
+ } else if (itemBottom > containerBottom) {
+ container.scrollTop = itemBottom - container.clientHeight
+ }
+ }
+ }, [selectedIndex])
+
+ // Render list content
+ const renderContent = () => {
+ if (!items.length) {
+ return (
+
+ No files found
+
+ )
+ }
+
+ return (
+
+ {items.map((item, index) => {
+ const filepath = item.filepath
+ const isSelected = index === selectedIndex
+
+ return (
+
+ )
+ })}
+