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

yay

Browse source
This commit is contained in:
Thomas G. Lopes 2025-06-18 11:40:14 +01:00
parent 13d8257f4a
commit 5b59ee04e7
1 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,7 @@
import { Command } from 'bits-ui'; import { Command } from 'bits-ui';
import ChevronDownIcon from '~icons/lucide/chevron-down'; import ChevronDownIcon from '~icons/lucide/chevron-down';
import SearchIcon from '~icons/lucide/search'; import SearchIcon from '~icons/lucide/search';
// Company icons from simple-icons import EyeIcon from '~icons/lucide/eye';
import GoogleIcon from '~icons/simple-icons/google'; import GoogleIcon from '~icons/simple-icons/google';
import MetaIcon from '~icons/simple-icons/meta'; import MetaIcon from '~icons/simple-icons/meta';
import MicrosoftIcon from '~icons/simple-icons/microsoft'; import MicrosoftIcon from '~icons/simple-icons/microsoft';
@ -16,7 +16,6 @@
import BrainIcon from '~icons/lucide/brain'; import BrainIcon from '~icons/lucide/brain';
import CpuIcon from '~icons/lucide/cpu'; import CpuIcon from '~icons/lucide/cpu';
import ZapIcon from '~icons/lucide/zap'; import ZapIcon from '~icons/lucide/zap';
// Model-specific icons
import Cohere from '$lib/components/icons/cohere.svelte'; import Cohere from '$lib/components/icons/cohere.svelte';
import Deepseek from '$lib/components/icons/deepseek.svelte'; import Deepseek from '$lib/components/icons/deepseek.svelte';
import { Popover } from 'melt/builders'; import { Popover } from 'melt/builders';
@ -25,6 +24,10 @@
import LogosMistralAiIcon from '~icons/logos/mistral-ai-icon'; import LogosMistralAiIcon from '~icons/logos/mistral-ai-icon';
import MaterialIconThemeGeminiAi from '~icons/material-icon-theme/gemini-ai'; import MaterialIconThemeGeminiAi from '~icons/material-icon-theme/gemini-ai';
import { capitalize } from '$lib/utils/strings'; 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';
type Props = { type Props = {
class?: string; class?: string;
@ -38,6 +41,8 @@
const enabledArr = $derived(Object.values(enabledModelsQuery.data ?? {})); const enabledArr = $derived(Object.values(enabledModelsQuery.data ?? {}));
modelsState.init();
// Company icon mapping // Company icon mapping
const companyIcons: Record<string, Component> = { const companyIcons: Record<string, Component> = {
openai: OpenaiIcon, openai: OpenaiIcon,
@ -252,7 +257,7 @@
onSelect={() => selectModel(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 flex-col items-center justify-center rounded-lg border p-2',
'select-none', 'relative select-none',
'data-selected:bg-accent/50 data-selected:text-accent-foreground', 'data-selected:bg-accent/50 data-selected:text-accent-foreground',
isSelected && 'border-reflect border-none', isSelected && 'border-reflect border-none',
'scroll-m-10' 'scroll-m-10'
@ -268,6 +273,23 @@
<p class="mt-0 text-center text-xs leading-tight font-medium"> <p class="mt-0 text-center text-xs leading-tight font-medium">
{formatted.secondary} {formatted.secondary}
</p> </p>
{@const openRouterModel = modelsState
.from(Provider.OpenRouter)
.find((m) => m.id === model.model_id)}
{#if openRouterModel && supportsImages(openRouterModel)}
<Tooltip>
{#snippet trigger(tooltip)}
<div
class="abs-x-center text-muted-foreground absolute bottom-3 flex items-center gap-1 text-xs"
{...tooltip.trigger}
>
<EyeIcon class="size-3" />
</div>
{/snippet}
Supports image anaylsis
</Tooltip>
{/if}
</Command.Item> </Command.Item>
{/each} {/each}
</Command.GroupItems> </Command.GroupItems>