;
@@ -31,7 +36,8 @@ export default defineSchema({
provider: providerValidator,
/** Different providers may use different ids for the same model */
model_id: v.string(),
- pinned: v.union(v.number(), v.null()),
+ // null is just here for compat we treat null as true
+ pinned: v.optional(v.union(v.boolean(), v.null())),
})
.index('by_user', ['user_id'])
.index('by_model_provider', ['model_id', 'provider'])
@@ -61,6 +67,7 @@ export default defineSchema({
role: v.union(v.literal('user'), v.literal('assistant'), v.literal('system')),
content: v.string(),
content_html: v.optional(v.string()),
+ reasoning: v.optional(v.string()),
error: v.optional(v.string()),
// Optional, coming from SK API route
model_id: v.optional(v.string()),
@@ -79,5 +86,7 @@ export default defineSchema({
cost_usd: v.optional(v.number()),
generation_id: v.optional(v.string()),
web_search_enabled: v.optional(v.boolean()),
+ reasoning_effort: v.optional(reasoningEffortValidator),
+ annotations: v.optional(v.array(v.record(v.string(), v.any()))),
}).index('by_conversation', ['conversation_id']),
});
diff --git a/src/lib/backend/convex/user_enabled_models.ts b/src/lib/backend/convex/user_enabled_models.ts
index bdb784e..173f026 100644
--- a/src/lib/backend/convex/user_enabled_models.ts
+++ b/src/lib/backend/convex/user_enabled_models.ts
@@ -109,12 +109,38 @@ export const set = mutation({
await ctx.db.insert('user_enabled_models', {
...object.pick(args, ['provider', 'model_id']),
user_id: session.userId,
- pinned: null,
+ pinned: false,
});
}
},
});
+export const toggle_pinned = mutation({
+ args: {
+ session_token: v.string(),
+ enabled_model_id: v.id('user_enabled_models'),
+ },
+ handler: async (ctx, args) => {
+ const session = await ctx.runQuery(internal.betterAuth.getSession, {
+ sessionToken: args.session_token,
+ });
+
+ if (!session) throw new Error('Invalid session token');
+
+ const model = await ctx.db.get(args.enabled_model_id);
+
+ if (!model) throw new Error('Model not found');
+
+ await ctx.db.patch(args.enabled_model_id, {
+ pinned: !isPinned(model),
+ });
+ },
+});
+
+export function isPinned(model: Doc<'user_enabled_models'>) {
+ return model.pinned === null || model.pinned;
+}
+
export const enable_initial = mutation({
args: {
session_token: v.string(),
@@ -150,7 +176,7 @@ export const enable_initial = mutation({
user_id: session.userId,
provider: Provider.OpenRouter,
model_id: model,
- pinned: null,
+ pinned: true,
})
)
);
diff --git a/src/lib/backend/convex/user_keys.ts b/src/lib/backend/convex/user_keys.ts
index a91a1c9..9848b07 100644
--- a/src/lib/backend/convex/user_keys.ts
+++ b/src/lib/backend/convex/user_keys.ts
@@ -99,14 +99,26 @@ export const set = mutation({
];
await Promise.all(
- defaultModels.map((model) =>
- ctx.db.insert('user_enabled_models', {
+ defaultModels.map(async (model) => {
+ const existing = await ctx.db
+ .query('user_enabled_models')
+ .withIndex('by_model_provider_user', (q) =>
+ q
+ .eq('model_id', model)
+ .eq('provider', Provider.OpenRouter)
+ .eq('user_id', session.userId)
+ )
+ .first();
+
+ if (existing) return;
+
+ await ctx.db.insert('user_enabled_models', {
user_id: session.userId,
provider: Provider.OpenRouter,
model_id: model,
- pinned: null,
- })
- )
+ pinned: true,
+ });
+ })
);
}
}
diff --git a/src/lib/components/animations/shiny-text.svelte b/src/lib/components/animations/shiny-text.svelte
index 5dcd114..cb0a75f 100644
--- a/src/lib/components/animations/shiny-text.svelte
+++ b/src/lib/components/animations/shiny-text.svelte
@@ -16,7 +16,7 @@
+ import { api } from '$lib/backend/convex/_generated/api';
+ import { useCachedQuery } from '$lib/cache/cached-query.svelte';
+ import Cohere from '$lib/components/icons/cohere.svelte';
+ import Deepseek from '$lib/components/icons/deepseek.svelte';
+ import Tooltip from '$lib/components/ui/tooltip.svelte';
+ import { IsMobile } from '$lib/hooks/is-mobile.svelte';
+ import { models as modelsState } from '$lib/state/models.svelte';
+ import { session } from '$lib/state/session.svelte';
+ import { settings } from '$lib/state/settings.svelte';
+ import { Provider } from '$lib/types';
+ import { fuzzysearch } from '$lib/utils/fuzzy-search';
+ import { supportsImages, supportsReasoning } from '$lib/utils/model-capabilities';
+ import { capitalize } from '$lib/utils/strings';
+ import { cn } from '$lib/utils/utils';
+ import { type Component } from 'svelte';
+ import LogosClaudeIcon from '~icons/logos/claude-icon';
+ import LogosMistralAiIcon from '~icons/logos/mistral-ai-icon';
+ import BrainIcon from '~icons/lucide/brain';
+ import ChevronDownIcon from '~icons/lucide/chevron-down';
+ import CpuIcon from '~icons/lucide/cpu';
+ import EyeIcon from '~icons/lucide/eye';
+ import SearchIcon from '~icons/lucide/search';
+ import ZapIcon from '~icons/lucide/zap';
+ import MaterialIconThemeGeminiAi from '~icons/material-icon-theme/gemini-ai';
+ import GoogleIcon from '~icons/simple-icons/google';
+ import MetaIcon from '~icons/simple-icons/meta';
+ import MicrosoftIcon from '~icons/simple-icons/microsoft';
+ import OpenaiIcon from '~icons/simple-icons/openai';
+ import XIcon from '~icons/simple-icons/x';
+ import { Command } from 'bits-ui';
+ import * as Popover from '$lib/components/ui/popover';
+ import { shortcut } from '$lib/actions/shortcut.svelte';
+ import { Button } from '../ui/button';
+ import ChevronLeftIcon from '~icons/lucide/chevron-left';
+ import { Kbd } from '../ui/kbd';
+ import { cmdOrCtrl } from '$lib/hooks/is-mac.svelte';
+ import { useConvexClient } from 'convex-svelte';
+ import type { Id } from '$lib/backend/convex/_generated/dataModel';
+ import { ResultAsync } from 'neverthrow';
+ import PinIcon from '~icons/lucide/pin';
+ import PinOffIcon from '~icons/lucide/pin-off';
+ import { isPinned } from '$lib/backend/convex/user_enabled_models';
+
+ type Props = {
+ class?: string;
+ /* When images are attached, we should not select models that don't support images */
+ onlyImageModels?: boolean;
+ };
+
+ let { class: className, onlyImageModels }: Props = $props();
+
+ const client = useConvexClient();
+
+ const enabledModelsQuery = useCachedQuery(api.user_enabled_models.get_enabled, {
+ session_token: session.current?.session.token ?? '',
+ });
+
+ const enabledArr = $derived(Object.values(enabledModelsQuery.data ?? {}));
+
+ modelsState.init();
+
+ // Company icon mapping
+ const companyIcons: Record = {
+ openai: OpenaiIcon,
+ anthropic: LogosClaudeIcon,
+ google: GoogleIcon,
+ meta: MetaIcon,
+ mistral: ZapIcon,
+ 'x-ai': XIcon,
+ microsoft: MicrosoftIcon,
+ qwen: CpuIcon,
+ deepseek: Deepseek,
+ cohere: Cohere,
+ };
+
+ function getModelIcon(modelId: string): Component | null {
+ const id = modelId.toLowerCase();
+
+ // Model-specific icons take priority
+ if (id.includes('claude') || id.includes('anthropic')) return LogosClaudeIcon;
+ if (id.includes('gemini') || id.includes('gemma')) return MaterialIconThemeGeminiAi;
+ if (id.includes('mistral') || id.includes('mixtral')) return LogosMistralAiIcon;
+
+ // Fallback to company icons
+ const company = getCompanyFromModelId(modelId);
+ return companyIcons[company] || null;
+ }
+
+ function getCompanyFromModelId(modelId: string): string {
+ const id = modelId.toLowerCase();
+
+ if (id.includes('gpt') || id.includes('o1') || id.includes('openai')) return 'openai';
+
+ if (id.includes('claude') || id.includes('anthropic')) return 'anthropic';
+
+ if (
+ id.includes('gemini') ||
+ id.includes('gemma') ||
+ id.includes('google') ||
+ id.includes('palm')
+ )
+ return 'google';
+
+ if (id.includes('llama') || id.includes('meta')) return 'meta';
+
+ if (id.includes('mistral') || id.includes('mixtral')) return 'mistral';
+
+ if (id.includes('grok') || id.includes('x-ai')) return 'x-ai';
+
+ if (id.includes('phi') || id.includes('microsoft')) return 'microsoft';
+
+ if (id.includes('qwen') || id.includes('alibaba')) return 'qwen';
+
+ if (id.includes('deepseek')) return 'deepseek';
+
+ if (id.includes('command') || id.includes('cohere')) return 'cohere';
+
+ // Try to extract from model path (e.g., "anthropic/claude-3")
+ const pathParts = modelId.split('/');
+ if (pathParts.length > 1) {
+ const provider = pathParts[0]?.toLowerCase();
+ if (provider && companyIcons[provider]) return provider;
+ }
+
+ 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 = {};
+
+ filteredModels.forEach((model) => {
+ const company = getCompanyFromModelId(model.model_id);
+ if (!groups[company]) {
+ groups[company] = [];
+ }
+ groups[company].push(model);
+ });
+
+ // Sort companies with known icons first
+ const result = Object.entries(groups).sort(([a], [b]) => {
+ const aHasIcon = companyIcons[a] ? 0 : 1;
+ const bHasIcon = companyIcons[b] ? 0 : 1;
+ return aHasIcon - bHasIcon || a.localeCompare(b);
+ });
+
+ return result;
+ });
+
+ const currentModel = $derived(enabledArr.find((m) => m.model_id === settings.modelId));
+
+ $effect(() => {
+ if (!enabledArr.find((m) => m.model_id === settings.modelId) && enabledArr.length > 0) {
+ settings.modelId = enabledArr[0]!.model_id;
+ }
+ });
+
+ let open = $state(false);
+ let view = $state<'favorites' | 'enabled'>('favorites');
+ let activeModel = $state('');
+
+ // Model name formatting utility
+ const termReplacements = [
+ { from: 'gpt', to: 'GPT' },
+ { from: 'claude', to: 'Claude' },
+ { from: 'deepseek', to: 'DeepSeek' },
+ { from: 'o3', to: 'o3' },
+ ];
+
+ function formatModelName(modelId: string) {
+ const cleanId = modelId.replace(/^[^/]+\//, '');
+ const parts = cleanId.split(/[-_,:]/);
+
+ const formattedParts = parts.map((part) => {
+ let formatted = capitalize(part);
+ termReplacements.forEach(({ from, to }) => {
+ formatted = formatted.replace(new RegExp(`\\b${from}\\b`, 'gi'), to);
+ });
+ return formatted;
+ });
+
+ return {
+ full: formattedParts.join(' '),
+ primary: formattedParts[0] || '',
+ secondary: formattedParts.slice(1).join(' '),
+ };
+ }
+
+ function modelSelected(modelId: string) {
+ settings.modelId = modelId;
+ open = false;
+ }
+
+ function toggleView() {
+ view = view === 'favorites' ? 'enabled' : 'favorites';
+ }
+
+ let pinning = $state(false);
+
+ async function togglePin(modelId: Id<'user_enabled_models'>) {
+ pinning = true;
+
+ await ResultAsync.fromPromise(
+ client.mutation(api.user_enabled_models.toggle_pinned, {
+ session_token: session.current?.session.token ?? '',
+ enabled_model_id: modelId,
+ }),
+ (e) => e
+ );
+
+ pinning = false;
+ }
+
+ const isMobile = new IsMobile();
+
+ const activeModelInfo = $derived.by(() => {
+ if (activeModel === '') return null;
+
+ const model = enabledArr.find((m) => m.model_id === activeModel);
+
+ if (!model) return null;
+
+ return {
+ ...model,
+ formatted: formatModelName(activeModel),
+ };
+ });
+
+ const pinnedModels = $derived(enabledArr.filter((m) => isPinned(m)));
+
+
+ (open = true),
+ }}
+/>
+
+
+ {#if enabledArr.length}
+
+
+ {#if currentModel && getModelIcon(currentModel.model_id)}
+ {@const IconComponent = getModelIcon(currentModel.model_id)}
+
+ {/if}
+
+ {currentModel ? formatModelName(currentModel.model_id).full : 'Select model'}
+
+
+
+
+
+
+
+
+
+ {#if view === 'favorites' && pinnedModels.length > 0}
+ {#each pinnedModels as model (model._id)}
+ {@const formatted = formatModelName(model.model_id)}
+ {@const openRouterModel = modelsState
+ .from(Provider.OpenRouter)
+ .find((m) => m.id === model.model_id)}
+ {@const disabled =
+ onlyImageModels && openRouterModel && !supportsImages(openRouterModel)}
+
+ modelSelected(model.model_id)}
+ >
+
+ {#if getModelIcon(model.model_id)}
+ {@const ModelIcon = getModelIcon(model.model_id)}
+
+ {/if}
+
+
+ {formatted.full}
+
+
+ {#if openRouterModel && supportsImages(openRouterModel)}
+
+ {#snippet trigger(tooltip)}
+
+
+
+ {/snippet}
+ Supports image analysis
+
+ {/if}
+
+ {#if openRouterModel && supportsReasoning(openRouterModel)}
+
+ {#snippet trigger(tooltip)}
+
+
+
+ {/snippet}
+ Supports reasoning
+
+ {/if}
+
+
+ {#if !isMobile.current && activeModelInfo && view === 'enabled'}
+
+
+
+ {/if}
+
+ {#if getModelIcon(model.model_id)}
+ {@const ModelIcon = getModelIcon(model.model_id)}
+
+ {/if}
+
+
+ {isMobile.current ? formatted.full : formatted.primary}
+
+
+
+ {formatted.secondary}
+
+
+ {#if openRouterModel && supportsImages(openRouterModel)}
+
+ {#snippet trigger(tooltip)}
+
+
+
+ {/snippet}
+ Supports image analysis
+
+ {/if}
+
+ {#if openRouterModel && supportsReasoning(openRouterModel)}
+
+ {#snippet trigger(tooltip)}
+
+
+
+ {/snippet}
+ Supports reasoning
+
+ {/if}
+
+
+
+ {@render children?.()}
+
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 0000000..3e98749
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+
+
+
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000..bd2c448
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,31 @@
+
+
+
+ {#snippet children({ checked })}
+
+ {#if checked}
+
+ {/if}
+
+ {@render childrenProp?.({ checked })}
+ {/snippet}
+
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..a8ac630
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+
+
+
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000..7ce000b
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,20 @@
+
+
+
+ {@render children?.()}
+
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 0000000..69b490f
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+
+
+
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 0000000..0bef89f
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+
+
+
+ {@render children?.()}
+
+
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 0000000..032b645
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,7 @@
+
+
+
diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..e7f0a79
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,49 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import GroupHeading from './dropdown-menu-group-heading.svelte';
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+
+export {
+ CheckboxItem,
+ Content,
+ Root as DropdownMenu,
+ CheckboxItem as DropdownMenuCheckboxItem,
+ Content as DropdownMenuContent,
+ Group as DropdownMenuGroup,
+ Item as DropdownMenuItem,
+ Label as DropdownMenuLabel,
+ RadioGroup as DropdownMenuRadioGroup,
+ RadioItem as DropdownMenuRadioItem,
+ Separator as DropdownMenuSeparator,
+ Shortcut as DropdownMenuShortcut,
+ Sub as DropdownMenuSub,
+ SubContent as DropdownMenuSubContent,
+ SubTrigger as DropdownMenuSubTrigger,
+ Trigger as DropdownMenuTrigger,
+ GroupHeading as DropdownMenuGroupHeading,
+ Group,
+ GroupHeading,
+ Item,
+ Label,
+ RadioGroup,
+ RadioItem,
+ Root,
+ Separator,
+ Shortcut,
+ Sub,
+ SubContent,
+ SubTrigger,
+ Trigger,
+};
diff --git a/src/lib/components/ui/kbd/kbd.svelte b/src/lib/components/ui/kbd/kbd.svelte
index 14fa701..64e193b 100644
--- a/src/lib/components/ui/kbd/kbd.svelte
+++ b/src/lib/components/ui/kbd/kbd.svelte
@@ -14,6 +14,7 @@
primary: 'bg-primary text-primary-foreground',
},
size: {
+ xs: 'min-w-5 gap-1.5 p-0.5 px-0.5 text-xs',
sm: 'min-w-6 gap-1.5 p-0.5 px-1 text-sm',
default: 'min-w-8 gap-1.5 p-1 px-2',
lg: 'min-w-9 gap-2 p-1 px-3 text-lg',
diff --git a/src/lib/components/ui/popover/index.ts b/src/lib/components/ui/popover/index.ts
new file mode 100644
index 0000000..c95cf83
--- /dev/null
+++ b/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,16 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
+import Trigger from './popover-trigger.svelte';
+const Root = PopoverPrimitive.Root;
+const Close = PopoverPrimitive.Close;
+export {
+ Root,
+ Content,
+ Trigger,
+ Close,
+ //
+ Root as Popover,
+ Content as PopoverContent,
+ Trigger as PopoverTrigger,
+ Close as PopoverClose,
+};
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000..c47788b
--- /dev/null
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,28 @@
+
+
+
+
+
diff --git a/src/lib/components/ui/popover/popover-trigger.svelte b/src/lib/components/ui/popover/popover-trigger.svelte
new file mode 100644
index 0000000..4700cb6
--- /dev/null
+++ b/src/lib/components/ui/popover/popover-trigger.svelte
@@ -0,0 +1,16 @@
+
+
+
diff --git a/src/lib/spells/persisted-obj.svelte.ts b/src/lib/spells/persisted-obj.svelte.ts
index 510ef76..232faa0 100644
--- a/src/lib/spells/persisted-obj.svelte.ts
+++ b/src/lib/spells/persisted-obj.svelte.ts
@@ -26,7 +26,7 @@ type PersistedObjOptions = {
syncTabs?: boolean;
};
-export function createPersistedObj(
+export function createPersistedObj>(
key: string,
initialValue: T,
options: PersistedObjOptions = {}
@@ -37,7 +37,7 @@ export function createPersistedObj(
syncTabs = true,
} = options;
- let current = initialValue;
+ let current: Record = initialValue;
let storage: Storage | undefined;
let subscribe: VoidFunction | undefined;
let version = $state(0);
@@ -47,7 +47,18 @@ export function createPersistedObj(
const existingValue = storage.getItem(key);
if (existingValue !== null) {
const deserialized = deserialize(existingValue);
- if (deserialized) current = deserialized;
+
+ if (deserialized) {
+ // handle keys that were added at a later point in time
+ for (const key of Object.keys(initialValue)) {
+ const initialKeyValue = deserialized[key];
+ if (initialKeyValue === undefined) {
+ deserialized[key] = initialValue[key];
+ }
+ }
+
+ current = deserialized;
+ }
} else {
serialize(initialValue);
}
@@ -66,7 +77,7 @@ export function createPersistedObj(
version += 1;
}
- function deserialize(value: string): T | undefined {
+ function deserialize(value: string): Record | undefined {
try {
return serializer.deserialize(value);
} catch (error) {
@@ -75,7 +86,7 @@ export function createPersistedObj(
}
}
- function serialize(value: T | undefined): void {
+ function serialize(value: Record | undefined): void {
try {
if (value != undefined) {
storage?.setItem(key, serializer.serialize(value));
diff --git a/src/lib/state/settings.svelte.ts b/src/lib/state/settings.svelte.ts
index 5e3d33e..0f286b5 100644
--- a/src/lib/state/settings.svelte.ts
+++ b/src/lib/state/settings.svelte.ts
@@ -3,4 +3,5 @@ import { createPersistedObj } from '$lib/spells/persisted-obj.svelte';
export const settings = createPersistedObj('settings', {
modelId: undefined as string | undefined,
webSearchEnabled: false,
+ reasoningEffort: 'low' as 'low' | 'medium' | 'high',
});
diff --git a/src/lib/types.ts b/src/lib/types.ts
index e4dde8f..05ab240 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,3 +1,5 @@
+import { z } from 'zod';
+
export const Provider = {
OpenRouter: 'openrouter',
HuggingFace: 'huggingface',
@@ -14,3 +16,21 @@ export type ProviderMeta = {
models?: string[];
placeholder?: string;
};
+
+export const UrlCitationSchema = z.object({
+ type: z.literal('url_citation'),
+ url_citation: z.object({
+ end_index: z.number(),
+ start_index: z.number(),
+ title: z.string(),
+ url: z.string(),
+ content: z.string(),
+ }),
+});
+
+export type UrlCitation = z.infer;
+
+// if there are more types do this
+// export const AnnotationSchema = z.union([UrlCitationSchema, ...]);
+export const AnnotationSchema = UrlCitationSchema;
+export type Annotation = z.infer;
diff --git a/src/lib/utils/casing.ts b/src/lib/utils/casing.ts
new file mode 100644
index 0000000..816d81c
--- /dev/null
+++ b/src/lib/utils/casing.ts
@@ -0,0 +1,333 @@
+/*
+ Installed from @ieedan/std
+*/
+
+import { isLetter } from '$lib/utils/is-letter';
+
+/** Converts a `camelCase` string to a `snake_case` string
+ *
+ * @param str
+ * @returns
+ *
+ * ## Usage
+ * ```ts
+ * camelToSnake('helloWorld'); // hello_world
+ * ```
+ */
+export function camelToSnake(str: string): string {
+ let newStr = '';
+
+ for (let i = 0; i < str.length; i++) {
+ // is uppercase letter
+ if (isLetter(str[i]) && str[i].toUpperCase() === str[i]) {
+ let l = i;
+
+ while (l < str.length && isLetter(str[l]) && str[l].toUpperCase() === str[l]) {
+ l++;
+ }
+
+ newStr += `${str.slice(i, l - 1).toLocaleLowerCase()}_${str[l - 1].toLocaleLowerCase()}`;
+
+ i = l - 1;
+
+ continue;
+ }
+
+ newStr += str[i].toLocaleLowerCase();
+ }
+
+ return newStr;
+}
+
+/** Converts a `PascalCase` string to a `snake_case` string
+ *
+ * @param str
+ * @returns
+ *
+ * ## Usage
+ * ```ts
+ * camelToSnake('HelloWorld'); // hello_world
+ * ```
+ */
+export function pascalToSnake(str: string): string {
+ let newStr = '';
+
+ let firstLetter: number | undefined;
+
+ for (let i = 0; i < str.length; i++) {
+ if (firstLetter === undefined && isLetter(str[i])) {
+ firstLetter = i;
+ }
+
+ // is uppercase letter (ignoring the first)
+ if (
+ firstLetter !== undefined &&
+ i > firstLetter &&
+ isLetter(str[i]) &&
+ str[i].toUpperCase() === str[i]
+ ) {
+ let l = i;
+
+ while (l < str.length && isLetter(str[l]) && str[l].toUpperCase() === str[l]) {
+ l++;
+ }
+
+ newStr += `${str.slice(i, l - 1).toLocaleLowerCase()}_${str[l - 1].toLocaleLowerCase()}`;
+
+ i = l - 1;
+
+ continue;
+ }
+
+ newStr += str[i].toLocaleLowerCase();
+ }
+
+ return newStr;
+}
+
+/** Converts a `camelCase` string to a `kebab-case` string
+ *
+ * @param str
+ * @returns
+ *
+ * ## Usage
+ * ```ts
+ * camelToSnake('helloWorld'); // hello-world
+ * ```
+ */
+export function camelToKebab(str: string): string {
+ let newStr = '';
+
+ for (let i = 0; i < str.length; i++) {
+ // is uppercase letter
+ if (i > 0 && isLetter(str[i]) && str[i].toUpperCase() === str[i]) {
+ let l = i;
+
+ while (l < str.length && isLetter(str[l]) && str[l].toUpperCase() === str[l]) {
+ l++;
+ }
+
+ newStr += `${str.slice(i, l - 1).toLocaleLowerCase()}-${str[l - 1].toLocaleLowerCase()}`;
+
+ i = l - 1;
+
+ continue;
+ }
+
+ newStr += str[i].toLocaleLowerCase();
+ }
+
+ return newStr;
+}
+
+/** Converts a `PascalCase` string to a `kebab-case` string
+ *
+ * @param str
+ * @returns
+ *
+ * ## Usage
+ * ```ts
+ * camelToSnake('HelloWorld'); // hello-world
+ * ```
+ */
+export function pascalToKebab(str: string): string {
+ let newStr = '';
+
+ for (let i = 0; i < str.length; i++) {
+ // is uppercase letter (ignoring the first)
+ if (i > 0 && isLetter(str[i]) && str[i].toUpperCase() === str[i]) {
+ let l = i;
+
+ while (l < str.length && isLetter(str[l]) && str[l].toUpperCase() === str[l]) {
+ l++;
+ }
+
+ newStr += `${str.slice(i, l - 1).toLocaleLowerCase()}-${str[l - 1].toLocaleLowerCase()}`;
+
+ i = l - 1;
+
+ continue;
+ }
+
+ newStr += str[i].toLocaleLowerCase();
+ }
+
+ return newStr;
+}
+
+/** Converts a `camelCase` string to a `PascalCase` string (makes first letter lowercase)
+ *
+ * @param str
+ * @returns
+ *
+ * ## Usage
+ * ```ts
+ * camelToPascal('helloWorld'); // HelloWorld
+ * ```
+ */
+export function camelToPascal(str: string): string {
+ return `${str[0].toLocaleUpperCase()}${str.slice(1)}`;
+}
+
+/** Converts a `PascalCase` string to a `camelCase` string (makes first letter uppercase)
+ *
+ * @param str
+ * @returns
+ *
+ * ## Usage
+ * ```ts
+ * camelToPascal('HelloWorld'); // helloWorld
+ * ```
+ */
+export function pascalToCamel(str: string): string {
+ return `${str[0].toLocaleLowerCase()}${str.slice(1)}`;
+}
+
+/** Converts a `snake_case` string to a `PascalCase` string
+ *
+ *
+ * @param str
+ * @returns
+ *
+ * ## Usage
+ * ```ts
+ * snakeToPascal('hello_world'); // HelloWorld
+ * snakeToPascal('HELLO_WORLD'); // HelloWorld
+ * ```
+ */
+export function snakeToPascal(str: string): string {
+ let newStr = '';
+
+ let firstLetter = true;
+
+ for (let i = 0; i < str.length; i++) {
+ // capitalize first letter
+ if (firstLetter && isLetter(str[i])) {
+ firstLetter = false;
+ newStr += str[i].toUpperCase();
+ continue;
+ }
+
+ // capitalize first after a _ (ignoring the first)
+ if (!firstLetter && str[i] === '_') {
+ i++;
+ if (i <= str.length - 1) {
+ newStr += str[i].toUpperCase();
+ } else {
+ newStr += '_';
+ }
+ continue;
+ }
+
+ newStr += str[i].toLocaleLowerCase();
+ }
+
+ return newStr;
+}
+
+/** Converts a `snake_case` string to a `camelCase` string
+ *
+ *
+ * @param str
+ * @returns
+ *
+ * ## Usage
+ * ```ts
+ * snakeToCamel('hello_world'); // helloWorld
+ * snakeToCamel('HELLO_WORLD'); // helloWorld
+ * ```
+ */
+export function snakeToCamel(str: string): string {
+ let newStr = '';
+
+ let firstLetter = true;
+
+ for (let i = 0; i < str.length; i++) {
+ // capitalize first letter
+ if (firstLetter && isLetter(str[i])) {
+ firstLetter = false;
+ newStr += str[i].toLowerCase();
+ continue;
+ }
+
+ // capitalize first after a _ (ignoring the first)
+ if (!firstLetter && str[i] === '_') {
+ i++;
+ if (i <= str.length - 1) {
+ newStr += str[i].toUpperCase();
+ } else {
+ newStr += '_';
+ }
+ continue;
+ }
+
+ newStr += str[i].toLocaleLowerCase();
+ }
+
+ return newStr;
+}
+
+/** Converts a `kebab-case` string to a `PascalCase` string
+ *
+ * @param str
+ * @returns
+ *
+ * ## Usage
+ * ```ts
+ * kebabToPascal('hello-world'); // HelloWorld
+ * ```
+ */
+export function kebabToPascal(str: string): string {
+ let newStr = '';
+
+ for (let i = 0; i < str.length; i++) {
+ // capitalize first
+ if (i === 0) {
+ newStr += str[i].toUpperCase();
+ continue;
+ }
+
+ // capitalize first after a -
+ if (str[i] === '-') {
+ i++;
+ if (i <= str.length - 1) {
+ newStr += str[i].toUpperCase();
+ }
+ continue;
+ }
+
+ newStr += str[i].toLocaleLowerCase();
+ }
+
+ return newStr;
+}
+
+/** Converts a `kebab-case` string to a `camelCase` string
+ *
+ *
+ * @param str
+ * @returns
+ *
+ * ## Usage
+ * ```ts
+ * kebabToCamel('hello-world'); // helloWorld
+ * ```
+ */
+export function kebabToCamel(str: string): string {
+ let newStr = '';
+
+ for (let i = 0; i < str.length; i++) {
+ // capitalize first after a -
+ if (str[i] === '-') {
+ i++;
+ if (i <= str.length - 1) {
+ newStr += str[i].toUpperCase();
+ }
+ continue;
+ }
+
+ newStr += str[i].toLocaleLowerCase();
+ }
+
+ return newStr;
+}
diff --git a/src/lib/utils/is-letter.ts b/src/lib/utils/is-letter.ts
new file mode 100644
index 0000000..c84cf51
--- /dev/null
+++ b/src/lib/utils/is-letter.ts
@@ -0,0 +1,25 @@
+/*
+ Installed from @ieedan/std
+*/
+
+export const LETTER_REGEX = new RegExp(/[a-zA-Z]/);
+
+/** Checks if the provided character is a letter in the alphabet.
+ *
+ * @param char
+ * @returns
+ *
+ * ## Usage
+ * ```ts
+ * isLetter('a');
+ * ```
+ */
+export function isLetter(char: string): boolean {
+ if (char.length > 1) {
+ throw new Error(
+ `You probably only meant to pass a character to this function. Instead you gave ${char}`
+ );
+ }
+
+ return LETTER_REGEX.test(char);
+}
diff --git a/src/lib/utils/model-capabilities.ts b/src/lib/utils/model-capabilities.ts
index c3f4252..9f39a8b 100644
--- a/src/lib/utils/model-capabilities.ts
+++ b/src/lib/utils/model-capabilities.ts
@@ -4,6 +4,10 @@ export function supportsImages(model: OpenRouterModel): boolean {
return model.architecture.input_modalities.includes('image');
}
+export function supportsReasoning(model: OpenRouterModel): boolean {
+ return model.supported_parameters.includes('reasoning');
+}
+
export function getImageSupportedModels(models: OpenRouterModel[]): OpenRouterModel[] {
return models.filter(supportsImages);
}
diff --git a/src/routes/account/+layout.svelte b/src/routes/account/+layout.svelte
index 2cb0b4e..b2bc56d 100644
--- a/src/routes/account/+layout.svelte
+++ b/src/routes/account/+layout.svelte
@@ -56,6 +56,14 @@
name: 'Search Messages',
keys: [cmdOrCtrl, 'K'],
},
+ {
+ name: 'Scroll to bottom',
+ keys: [cmdOrCtrl, 'D'],
+ },
+ {
+ name: 'Open Model Picker',
+ keys: [cmdOrCtrl, 'Shift', 'M'],
+ },
];
async function signOut() {
diff --git a/src/routes/account/models/+page.svelte b/src/routes/account/models/+page.svelte
index 638f175..23dfd52 100644
--- a/src/routes/account/models/+page.svelte
+++ b/src/routes/account/models/+page.svelte
@@ -12,6 +12,7 @@
import PlusIcon from '~icons/lucide/plus';
import XIcon from '~icons/lucide/x';
import ModelCard from './model-card.svelte';
+ import { supportsImages, supportsReasoning } from '$lib/utils/model-capabilities';
const openRouterKeyQuery = useCachedQuery(api.user_keys.get, {
provider: Provider.OpenRouter,
@@ -32,7 +33,14 @@
const freeModelsToggle = new Toggle({
value: false,
- disabled: false,
+ });
+
+ const reasoningModelsToggle = new Toggle({
+ value: false,
+ });
+
+ const imageModelsToggle = new Toggle({
+ value: false,
});
let initiallyEnabled = $state([]);
@@ -48,11 +56,19 @@
const openRouterModels = $derived(
fuzzysearch({
haystack: models.from(Provider.OpenRouter).filter((m) => {
- if (!freeModelsToggle.value) return true;
+ if (freeModelsToggle.value) {
+ if (m.pricing.prompt !== '0') return false;
+ }
- if (m.pricing.prompt === '0') return true;
+ if (reasoningModelsToggle.value) {
+ if (!supportsReasoning(m)) return false;
+ }
- return false;
+ if (imageModelsToggle.value) {
+ if (!supportsImages(m)) return false;
+ }
+
+ return true;
}),
needle: search,
property: 'name',
@@ -96,6 +112,24 @@
+
+
diff --git a/src/routes/account/models/model-card.svelte b/src/routes/account/models/model-card.svelte
index a76d7f4..2ad59ef 100644
--- a/src/routes/account/models/model-card.svelte
+++ b/src/routes/account/models/model-card.svelte
@@ -7,6 +7,11 @@
import { session } from '$lib/state/session.svelte.js';
import { ResultAsync } from 'neverthrow';
import { getFirstSentence } from '$lib/utils/strings';
+ import { supportsImages, supportsReasoning } from '$lib/utils/model-capabilities';
+ import type { OpenRouterModel } from '$lib/backend/models/open-router';
+ import Tooltip from '$lib/components/ui/tooltip.svelte';
+ import EyeIcon from '~icons/lucide/eye';
+ import BrainIcon from '~icons/lucide/brain';
type Model = {
id: string;
@@ -15,10 +20,11 @@
};
type Props = {
- provider: Provider;
- model: Model;
enabled?: boolean;
disabled?: boolean;
+ } & {
+ provider: typeof Provider.OpenRouter;
+ model: OpenRouterModel;
};
let { provider, model, enabled = false, disabled = false }: Props = $props();
@@ -56,9 +62,9 @@
enabled, toggleEnabled} {disabled} />
- {showMore ? fullDescription : (shortDescription ?? fullDescription)}
+
+ {showMore ? fullDescription : (shortDescription ?? fullDescription)}
+
{#if shortDescription !== null}