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

search and scroll

Browse source
This commit is contained in:
Aidan Bleser 2025-06-18 05:53:00 -05:00
parent 5b59ee04e7
commit 7c080575dd
2 changed files with 33 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/lib/utils/array.ts
View file

@ -27,6 +27,16 @@ export function fromMap<K, V, T>(map: Map<K, V>, fn: (key: K, value: V) => T): T
return items;
}
export function fromRecord<V, T>(map: Record<string, V>, fn: (key: string, value: V) => T): T[] {
const items: T[] = [];
for (const [key, value] of Object.entries(map)) {
items.push(fn(key, value));
}
return items;
}
/** Calculates the sum of all elements in the array based on the provided function.
*
* @param arr Array of items to be summed.

35
src/routes/chat/model-picker.svelte
View file

@ -28,6 +28,8 @@
import { models as modelsState } from '$lib/state/models.svelte';
import { Provider } from '$lib/types';
import Tooltip from '$lib/components/ui/tooltip.svelte';
import fuzzysearch from '$lib/utils/fuzzy-search';
import { IsMobile } from '$lib/hooks/is-mobile.svelte';
type Props = {
class?: string;
@ -109,11 +111,21 @@
return 'other';
}
let search = $state('')
const filteredModels = $derived(
fuzzysearch({
haystack: enabledArr,
needle: search,
property: 'model_id',
})
);
// Group models by company
const groupedModels = $derived.by(() => {
const groups: Record<string, typeof enabledArr> = {};
const groups: Record<string, typeof filteredModels> = {};
enabledArr.forEach((model) => {
filteredModels.forEach((model) => {
const company = getCompanyFromModelId(model.model_id);
if (!groups[company]) {
groups[company] = [];
@ -184,6 +196,8 @@
secondary: formattedParts.slice(1).join(' '),
};
}
const isMobile = new IsMobile()
</script>
{#if enabledArr.length === 0}
@ -216,12 +230,13 @@
{...popover.content}
class="border-border bg-popover mt-1 max-h-200 min-w-80 flex-col overflow-hidden rounded-xl border p-0 backdrop-blur-sm data-[open]:flex"
>
<Command.Root class="flex h-full flex-col overflow-hidden" columns={4}>
<label class="group/label relative flex items-center gap-2 px-4 py-3 text-sm">
<Command.Root shouldFilter={false} class="flex h-full flex-col overflow-hidden w-[572px]" columns={4}>
<label class="group/label relative flex items-center border-b border-border gap-2 px-4 py-3 text-sm">
<SearchIcon class="text-muted-foreground" />
<Command.Input
class="w-full outline-none"
placeholder="Search models..."
bind:value={search}
{@attach (node) => {
if (popover.open) {
node.focus();
@ -231,20 +246,16 @@
};
}}
/>
<div
class="border-border/50 group-focus-within/label:border-foreground/30 absolute inset-x-2 bottom-0 h-1 border-b"
aria-hidden="true"
></div>
</label>
<Command.List class="overflow-y-auto">
<Command.List class="overflow-y-auto h-[430px]">
<Command.Viewport>
<Command.Empty class="text-muted-foreground p-4 text-sm">
<Command.Empty class="text-muted-foreground p-4 text-sm h-[120px] flex items-center justify-center">
No models available. Enable some models in the account settings.
</Command.Empty>
{#each groupedModels as [company, models] (company)}
<Command.Group class="space-y-2">
<Command.GroupHeading
class="text-heading/75 flex items-center gap-2 px-3 pt-3 pb-1 text-xs font-semibold tracking-wide capitalize"
class="text-heading/75 scroll-m-[180px] flex items-center gap-2 px-3 pt-3 pb-1 text-xs font-semibold tracking-wide capitalize"
>
{company}
</Command.GroupHeading>
@ -260,7 +271,7 @@
'relative select-none',
'data-selected:bg-accent/50 data-selected:text-accent-foreground',
isSelected && 'border-reflect border-none',
'scroll-m-10'
)}
>
{#if getModelIcon(model.model_id)}