diff --git a/src/lib/components/chat/ChatSearch.svelte b/src/lib/components/chat/ChatSearch.svelte index 3317c33cf..1387b117e 100644 --- a/src/lib/components/chat/ChatSearch.svelte +++ b/src/lib/components/chat/ChatSearch.svelte @@ -18,6 +18,7 @@ let searchQuery = ''; let matchingMessageIds: string[] = []; let currentIndex = 0; + let isNavigating = false; // Visual feedback for navigation // Computed values $: totalResults = matchingMessageIds.length; @@ -33,11 +34,21 @@ closeSearch(); } else if (e.key === 'Enter') { e.preventDefault(); + if (totalResults === 0) return; // No results to navigate + if (e.shiftKey) { navigateToPrevious(); } else { navigateToNext(); } + } else if (e.key === 'ArrowUp' && (e.metaKey || e.ctrlKey)) { + // Cmd/Ctrl + Arrow Up for previous (alternative shortcut) + e.preventDefault(); + if (totalResults > 0) navigateToPrevious(); + } else if (e.key === 'ArrowDown' && (e.metaKey || e.ctrlKey)) { + // Cmd/Ctrl + Arrow Down for next (alternative shortcut) + e.preventDefault(); + if (totalResults > 0) navigateToNext(); } }; @@ -45,6 +56,7 @@ searchQuery = ''; matchingMessageIds = []; currentIndex = 0; + isNavigating = false; dispatch('close'); }; @@ -69,6 +81,11 @@ matchingMessageIds = messageIds; currentIndex = messageIds.length > 0 ? 0 : 0; + + // Auto-navigate to first result when search finds matches + if (messageIds.length > 0) { + scrollToCurrentResult(); + } }; const handleInput = () => { @@ -76,17 +93,30 @@ }; const navigateToNext = () => { - if (totalResults > 0) { - currentIndex = (currentIndex + 1) % totalResults; - scrollToCurrentResult(); - } + if (totalResults === 0) return; + + const nextIndex = (currentIndex + 1) % totalResults; + navigateToResult(nextIndex); }; const navigateToPrevious = () => { - if (totalResults > 0) { - currentIndex = currentIndex === 0 ? totalResults - 1 : currentIndex - 1; - scrollToCurrentResult(); - } + if (totalResults === 0) return; + + const prevIndex = currentIndex === 0 ? totalResults - 1 : currentIndex - 1; + navigateToResult(prevIndex); + }; + + const navigateToResult = (newIndex: number) => { + if (newIndex < 0 || newIndex >= matchingMessageIds.length) return; + + currentIndex = newIndex; + scrollToCurrentResult(); + + // Visual feedback for navigation + isNavigating = true; + setTimeout(() => { + isNavigating = false; + }, 300); }; const scrollToCurrentResult = () => { @@ -94,8 +124,20 @@ const messageId = matchingMessageIds[currentIndex]; const messageElement = document.getElementById(`message-${messageId}`); if (messageElement) { - // Use same scroll pattern as Chat.svelte - messageElement.scrollIntoView({ behavior: 'smooth', block: 'center' }); + // Enhanced scroll with better positioning + messageElement.scrollIntoView({ + behavior: 'smooth', + block: 'center', + inline: 'nearest' + }); + + // Add subtle visual feedback to the message + messageElement.style.transition = 'background-color 0.3s ease'; + messageElement.style.backgroundColor = 'rgba(59, 130, 246, 0.1)'; // Light blue highlight + + setTimeout(() => { + messageElement.style.backgroundColor = ''; + }, 1000); } } }; @@ -120,6 +162,7 @@