diff --git a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx index 4798b77c..1cccdf65 100644 --- a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx +++ b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { RiCodeLine, RiFileImageLine, RiFileLine, RiFilePdfLine, RiRefreshLine } from '@remixicon/react'; -import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; import { cn, truncatePathMiddle } from '@/lib/utils'; import { useDirectoryStore } from '@/stores/useDirectoryStore'; import { useSessionStore } from '@/stores/useSessionStore'; @@ -33,8 +32,12 @@ export const FileMentionAutocomplete = React.forwardRef([]); const [loading, setLoading] = React.useState(false); const [selectedIndex, setSelectedIndex] = React.useState(0); - const [hoveredTooltipIndex, setHoveredTooltipIndex] = React.useState(null); + const [marqueeWidth, setMarqueeWidth] = React.useState(360); + const [overflowMap, setOverflowMap] = React.useState>({}); + const [marqueeDurations, setMarqueeDurations] = React.useState>({}); const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]); + const labelRefs = React.useRef<(HTMLSpanElement | null)[]>([]); + const measureRefs = React.useRef<(HTMLSpanElement | null)[]>([]); const containerRef = React.useRef(null); const fuzzyScore = React.useCallback((query: string, candidate: string): number | null => { @@ -159,7 +162,8 @@ export const FileMentionAutocomplete = React.forwardRef { setSelectedIndex(0); - setHoveredTooltipIndex(null); + setOverflowMap({}); + setMarqueeDurations({}); }, [files]); React.useEffect(() => { @@ -169,6 +173,73 @@ export const FileMentionAutocomplete = React.forwardRef { + let frameId: number | null = null; + + const updateOverflow = () => { + if (frameId !== null) { + cancelAnimationFrame(frameId); + } + frameId = requestAnimationFrame(() => { + const next: Record = {}; + const durations: Record = {}; + labelRefs.current.forEach((node, index) => { + if (!node) { + return; + } + const measureNode = measureRefs.current[index]; + const fullWidth = measureNode?.offsetWidth ?? node.scrollWidth; + const overflowPx = Math.max(0, fullWidth - node.clientWidth); + const isOverflowing = overflowPx > 8; + next[index] = isOverflowing; + if (isOverflowing) { + const duration = Math.max(0.6, overflowPx / 110); + durations[index] = duration; + } + }); + setOverflowMap(next); + setMarqueeDurations(durations); + }); + }; + + updateOverflow(); + window.addEventListener('resize', updateOverflow); + + return () => { + if (frameId !== null) { + cancelAnimationFrame(frameId); + } + window.removeEventListener('resize', updateOverflow); + }; + }, [files]); + + React.useEffect(() => { + const labelNode = labelRefs.current[selectedIndex]; + if (!labelNode) { + return; + } + + const updateWidth = () => { + const width = labelNode.clientWidth; + if (width > 0) { + setMarqueeWidth(width); + } + }; + + updateWidth(); + + if (typeof ResizeObserver === 'undefined') { + return; + } + + const observer = new ResizeObserver(updateWidth); + observer.observe(labelNode); + + return () => { + observer.disconnect(); + }; + }, [selectedIndex]); + const handleFileSelect = React.useCallback(async (file: FileInfo) => { await addServerFile(file.path, file.name); @@ -247,8 +318,8 @@ export const FileMentionAutocomplete = React.forwardRef setSelectedIndex(index)} > {getFileIcon(file)} - - {displayPath} + { labelRefs.current[index] = el; }} + className="relative flex-1 overflow-hidden max-w-[360px] file-mention-marquee-container" + style={isSelected ? { + ['--file-mention-marquee-width' as string]: `${marqueeWidth}px`, + ['--file-mention-marquee-duration' as string]: `${marqueeDuration}s` + } : undefined} + aria-label={relativePath} + > + { measureRefs.current[index] = el; }} + className="absolute invisible whitespace-nowrap pointer-events-none" + aria-hidden + > + {relativePath} + + {isOverflowing && isSelected ? ( + + {relativePath} + + ) : ( + + {displayPath} + + )} ); return ( - { - setHoveredTooltipIndex((previous) => { - if (!open && previous === index) { - return null; - } - if (open) { - return index; - } - return previous; - }); - }} - > - {item} - - - {relativePath} - - - + + {item} + ); })} {} diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index 99dde492..4f817aea 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -131,6 +131,25 @@ textarea[data-chat-input="true"]:hover { } } +@keyframes oc-file-mention-marquee { + 0% { + transform: translateX(0%); + } + 100% { + transform: translateX(calc(-100% + var(--file-mention-marquee-width, 360px))); + } +} + +.file-mention-marquee-container { + --file-mention-marquee-width: 360px; + --file-mention-marquee-duration: 4s; +} + +.file-mention-marquee { + animation: oc-file-mention-marquee var(--file-mention-marquee-duration, 4s) linear 0.2s 1 both; + will-change: transform; +} + /* Safari/WebKit fixes for buttons and SVG icons */ /* Remixicon puts fill="currentColor" on root SVG which WebKit renders as background */ button svg.remixicon,