Cossale/kepler-chat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better search

Browse source
This commit is contained in:
Thomas G. Lopes 2025-06-18 18:31:21 +01:00
parent 10332fbaa9
commit 9d36105fbd
2 changed files with 73 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/lib/utils/fuzzy-search.ts
View file

@ -18,6 +18,8 @@ export default function enhancedSearch<T>(options: {
}): SearchResult<T>[] {
const { needle, haystack, property, mode = 'words', minScore = 0.3 } = options;
if (!needle) return haystack.map((item) => ({ item, score: 1, matchType: 'exact' }));
if (!Array.isArray(haystack)) {
throw new Error('Haystack must be an array');
}
@ -48,7 +50,7 @@ export default function enhancedSearch<T>(options: {
// Sort by score (highest first), then by match type priority
return results.sort((a, b) => {
if (a.score !== b.score) return b.score - a.score;
const typePriority = { exact: 3, word: 2, fuzzy: 1 };
return typePriority[b.matchType] - typePriority[a.matchType];
});
@ -62,13 +64,17 @@ export function fuzzysearch<T>(options: {
haystack: T[];
property: keyof T | ((item: T) => string);
}): T[] {
return enhancedSearch(options).map(result => result.item);
return enhancedSearch(options).map((result) => result.item);
}
/**
* Score a match between needle and haystack
*/
function scoreMatch(needle: string, haystack: string, mode: SearchMode): { score: number; matchType: 'exact' | 'word' | 'fuzzy' } | null {
function scoreMatch(
needle: string,
haystack: string,
mode: SearchMode
): { score: number; matchType: 'exact' | 'word' | 'fuzzy' } | null {
// Exact match gets highest score
if (haystack === needle) {
return { score: 1.0, matchType: 'exact' };
@ -105,11 +111,11 @@ function scoreMatch(needle: string, haystack: string, mode: SearchMode): { score
function scoreWordMatch(needle: string, haystack: string): number {
const words = haystack.split(/\s+/);
const needleWords = needle.split(/\s+/);
// Check for exact word matches
let exactWordMatches = 0;
let partialWordMatches = 0;
for (const needleWord of needleWords) {
let found = false;
for (const word of words) {
@ -124,23 +130,25 @@ function scoreWordMatch(needle: string, haystack: string): number {
}
}
}
const totalNeedleWords = needleWords.length;
if (exactWordMatches === totalNeedleWords) {
return 0.9; // High score for all words matching exactly
}
if (exactWordMatches + partialWordMatches === totalNeedleWords) {
return 0.7 * (exactWordMatches / totalNeedleWords) + 0.3 * (partialWordMatches / totalNeedleWords);
return (
0.7 * (exactWordMatches / totalNeedleWords) + 0.3 * (partialWordMatches / totalNeedleWords)
);
}
// Check if needle appears at the start of any word
for (const word of words) {
if (word.startsWith(needle)) {
return 0.6;
}
}
return 0;
}
@ -151,41 +159,41 @@ function scoreFuzzyMatch(needle: string, haystack: string): number {
if (!fuzzyMatchString(needle, haystack)) {
return 0;
}
// Calculate a score based on how close the characters are
let score = 0;
let lastIndex = -1;
let consecutiveMatches = 0;
for (let i = 0; i < needle.length; i++) {
const char = needle.charAt(i);
const index = haystack.indexOf(char, lastIndex + 1);
if (index === -1) {
return 0; // This shouldn't happen if fuzzyMatchString returned true
}
if (index === lastIndex + 1) {
consecutiveMatches++;
score += 0.1; // Bonus for consecutive matches
} else {
consecutiveMatches = 0;
}
// Penalty based on distance
const distance = index - lastIndex - 1;
score += Math.max(0, 0.05 - distance * 0.01);
lastIndex = index;
}
// Normalize score
score = score / needle.length;
// Length ratio bonus
const lengthRatio = needle.length / haystack.length;
score *= (0.5 + lengthRatio * 0.5);
score *= 0.5 + lengthRatio * 0.5;
return Math.min(0.5, Math.max(0.1, score)); // Cap fuzzy scores at 0.5
}

68
src/routes/chat/search-modal.svelte
View file

@ -6,6 +6,7 @@
import { session } from '$lib/state/session.svelte';
import { useQuery } from 'convex-svelte';
import { Debounced } from 'runed';
import { tick } from 'svelte';
import SearchIcon from '~icons/lucide/search';
let open = $state(false);
@ -41,21 +42,30 @@
<Modal bind:open>
<div class="space-y-4">
<h2 class="text-lg font-semibold">Search Conversations</h2>
<div class="space-y-3">
<input
bind:this={inputEl}
bind:value={input}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
<input
bind:this={inputEl}
bind:value={input}
class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
placeholder="Search conversations and messages..."
{@attach (node) => {
if (!open) return;
setTimeout(() => {
console.log('focus', node, open);
if (open) node.focus();
}, 50);
}}
/>
<div class="flex gap-2 items-center">
<label for="search-mode" class="text-sm font-medium text-muted-foreground">Search mode:</label>
<select
<div class="flex items-center gap-2">
<label for="search-mode" class="text-muted-foreground text-sm font-medium"
>Search mode:</label
>
<select
id="search-mode"
bind:value={searchMode}
class="rounded border border-input bg-background px-2 py-1 text-xs"
class="border-input bg-background rounded border px-2 py-1 text-xs"
>
<option value="words">Word matching</option>
<option value="exact">Exact match</option>
@ -66,39 +76,51 @@
{#if search.isLoading}
<div class="flex justify-center py-8">
<div class="size-6 animate-spin rounded-full border-2 border-current border-t-transparent"></div>
<div
class="size-6 animate-spin rounded-full border-2 border-current border-t-transparent"
></div>
</div>
{:else if search.data?.length}
<div class="space-y-2 max-h-96 overflow-y-auto">
<div class="max-h-96 space-y-2 overflow-y-auto">
{#each search.data as { conversation, messages, score, titleMatch }}
<div class="border-border flex items-center justify-between gap-2 rounded-lg border px-3 py-2">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1">
<div class="font-medium truncate" class:text-blue-600={titleMatch}>
<div
class="border-border flex items-center justify-between gap-2 rounded-lg border px-3 py-2"
>
<div class="min-w-0 flex-1">
<div class="mb-1 flex items-center gap-2">
<div class={['truncate font-medium', titleMatch && 'text-heading']}>
{conversation.title}
</div>
<div class="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
<div class="text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs">
{Math.round(score * 100)}%
</div>
</div>
<div class="text-xs text-muted-foreground">
<div class="text-muted-foreground text-xs">
{messages.length} matching message{messages.length !== 1 ? 's' : ''}
{#if titleMatch}
<span class="text-blue-600">• Title match</span>
<span class="text-heading">• Title match</span>
{/if}
</div>
</div>
<Button variant="secondary" size="sm" class="text-xs shrink-0">View</Button>
<Button
variant="secondary"
size="sm"
class="shrink-0 text-xs"
href="/chat/{conversation._id}"
onclick={() => (open = false)}
>
View
</Button>
</div>
{/each}
</div>
{:else if debouncedInput.current.trim()}
<div class="text-center py-8 text-muted-foreground">
<div class="text-muted-foreground py-8 text-center">
<p>No results found for "{debouncedInput.current}"</p>
<p class="text-xs mt-1">Try a different search term or mode</p>
<p class="mt-1 text-xs">Try a different search term or mode</p>
</div>
{:else}
<div class="text-center py-8 text-muted-foreground">
<div class="text-muted-foreground py-8 text-center">
<p>Start typing to search your conversations</p>
</div>
{/if}