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

fixed

Browse source
This commit is contained in:
Aidan Bleser 2025-06-18 08:53:56 -05:00
parent 58b0031bd4
commit 7161858a0d
1 changed files with 85 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,23 +32,6 @@
import MicrosoftIcon from '~icons/simple-icons/microsoft'; import MicrosoftIcon from '~icons/simple-icons/microsoft';
import OpenaiIcon from '~icons/simple-icons/openai'; import OpenaiIcon from '~icons/simple-icons/openai';
import XIcon from '~icons/simple-icons/x'; import XIcon from '~icons/simple-icons/x';
import BrainIcon from '~icons/lucide/brain';
import CpuIcon from '~icons/lucide/cpu';
import ZapIcon from '~icons/lucide/zap';
import Cohere from '$lib/components/icons/cohere.svelte';
import Deepseek from '$lib/components/icons/deepseek.svelte';
import { Popover } from 'melt/builders';
import type { Component } from 'svelte';
import LogosClaudeIcon from '~icons/logos/claude-icon';
import LogosMistralAiIcon from '~icons/logos/mistral-ai-icon';
import MaterialIconThemeGeminiAi from '~icons/material-icon-theme/gemini-ai';
import { capitalize } from '$lib/utils/strings';
import { supportsImages } from '$lib/utils/model-capabilities';
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 = { type Props = {
class?: string; class?: string;
@ -139,12 +122,10 @@
return 'other'; return 'other';
} }
let search = $state('');
const filteredModels = $derived( const filteredModels = $derived(
fuzzysearch({ fuzzysearch({
haystack: enabledArr, haystack: enabledArr,
needle: search, needle: gridCommand.inputValue,
property: 'model_id', property: 'model_id',
}) })
); );
@ -257,11 +238,7 @@
{...popover.content} {...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" 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 <div class="flex h-full flex-col overflow-hidden md:w-[572px]" {...gridCommand.root}>
shouldFilter={false}
class="flex h-full flex-col overflow-hidden md:w-[572px]"
columns={isMobile.current ? undefined : 4}
>
<label <label
class="group/label border-border relative flex items-center gap-2 border-b px-4 py-3 text-sm" class="group/label border-border relative flex items-center gap-2 border-b px-4 py-3 text-sm"
> >
@ -269,7 +246,6 @@
<input <input
class="w-full outline-none" class="w-full outline-none"
placeholder="Search models..." placeholder="Search models..."
bind:value={search}
{@attach (node) => { {@attach (node) => {
if (popover.open) { if (popover.open) {
node.focus(); node.focus();
@ -288,34 +264,30 @@
})} })}
/> />
</label> </label>
<Command.List class="h-[300px] overflow-y-auto md:h-[430px]"> <div class="h-[300px] overflow-y-auto md:h-[430px]">
<Command.Viewport>
<Command.Empty
class="text-muted-foreground flex items-center justify-center p-4 text-sm md:h-[120px]"
>
No models available. Enable some models in the account settings.
</Command.Empty>
{#each groupedModels as [company, models] (company)} {#each groupedModels as [company, models] (company)}
<Command.Group class="space-y-2"> <div {...gridCommand.group} class="space-y-2">
<Command.GroupHeading <p
class="text-heading/75 flex items-center gap-2 px-3 pt-3 pb-1 text-xs font-semibold tracking-wide capitalize md:scroll-m-[180px]" class="text-heading/75 flex scroll-m-2 items-center gap-2 px-3 pt-3 pb-1 text-xs font-semibold tracking-wide capitalize"
{...gridCommand.groupHeading}
> >
{company} {company}
</Command.GroupHeading> </p>
<Command.GroupItems <div class="flex flex-col gap-2 px-3 pb-3 md:grid md:grid-cols-4 md:gap-3">
class="flex flex-col gap-2 px-3 pb-3 md:grid md:grid-cols-4 md:gap-3"
>
{#each models as model (model._id)} {#each models as model (model._id)}
{@const isSelected = settings.modelId === model.model_id} {@const isSelected = settings.modelId === model.model_id}
{@const formatted = formatModelName(model.model_id)} {@const formatted = formatModelName(model.model_id)}
{@const openRouterModel = modelsState
.from(Provider.OpenRouter)
.find((m) => m.id === model.model_id)}
{#if isMobile.current} {#if isMobile.current}
<Command.Item <div
value={model.model_id} {...gridCommand.getItem(model.model_id)}
onSelect={() => selectModel(model.model_id)}
class={cn( class={cn(
'border-border flex h-10 items-center justify-between rounded-lg border p-2', 'border-border flex h-10 items-center justify-between rounded-lg border p-2',
'relative scroll-m-2 select-none', 'relative scroll-m-2 select-none',
'data-selected:bg-accent/50 data-selected:text-accent-foreground', 'data-highlighted:bg-accent/50 data-highlighted:text-accent-foreground',
isSelected && 'border-reflect border-none' isSelected && 'border-reflect border-none'
)} )}
> >
@ -329,9 +301,6 @@
</p> </p>
</div> </div>
{@const openRouterModel = modelsState
.from(Provider.OpenRouter)
.find((m) => m.id === model.model_id)}
{#if openRouterModel && supportsImages(openRouterModel)} {#if openRouterModel && supportsImages(openRouterModel)}
<Tooltip> <Tooltip>
{#snippet trigger(tooltip)} {#snippet trigger(tooltip)}
@ -342,15 +311,14 @@
Supports image anaylsis Supports image anaylsis
</Tooltip> </Tooltip>
{/if} {/if}
</Command.Item> </div>
{:else} {:else}
<Command.Item <div
value={model.model_id} {...gridCommand.getItem(model.model_id)}
onSelect={() => selectModel(model.model_id)}
class={cn( class={cn(
'border-border flex h-40 w-32 flex-col items-center justify-center rounded-lg border p-2', 'border-border flex h-40 w-32 scroll-m-2 flex-col items-center justify-center rounded-lg border p-2',
'relative select-none', 'relative select-none',
'data-selected:bg-accent/50 data-selected:text-accent-foreground', 'data-highlighted:bg-accent/50 data-highlighted:text-accent-foreground',
isSelected && 'border-reflect border-none' isSelected && 'border-reflect border-none'
)} )}
> >
@ -365,9 +333,6 @@
{formatted.secondary} {formatted.secondary}
</p> </p>
{@const openRouterModel = modelsState
.from(Provider.OpenRouter)
.find((m) => m.id === model.model_id)}
{#if openRouterModel && supportsImages(openRouterModel)} {#if openRouterModel && supportsImages(openRouterModel)}
<Tooltip> <Tooltip>
{#snippet trigger(tooltip)} {#snippet trigger(tooltip)}
@ -381,14 +346,13 @@
Supports image anaylsis Supports image anaylsis
</Tooltip> </Tooltip>
{/if} {/if}
</Command.Item> </div>
{/if} {/if}
{/each} {/each}
</Command.GroupItems> </div>
</Command.Group> </div>
{/each} {/each}
</Command.Viewport> </div>
</Command.List> </div>
</Command.Root>
</div> </div>
{/if} {/if}