{#if enabledArr.length === 0}
Loading models...
{:else}
{#if currentModel && getModelIcon(currentModel.model_id)} {@const IconComponent = getModelIcon(currentModel.model_id)}
{/if}
{currentModel ? formatModelName(currentModel.model_id).full : 'Select model'}
{ if (popover.open) { node.focus(); } return () => { node.value = ''; }; }} />
No models available. Enable some models in the account settings.
{#each groupedModels as [company, models] (company)}
{company}
{#each models as model (model._id)} {@const isSelected = settings.modelId === model.model_id} {@const formatted = formatModelName(model.model_id)} {#if isMobile.current}
selectModel(model.model_id)} class={cn( 'border-border flex h-10 items-center justify-between rounded-lg border p-2', 'relative scroll-m-2 select-none', 'data-selected:bg-accent/50 data-selected:text-accent-foreground', isSelected && 'border-reflect border-none' )} >
{#if getModelIcon(model.model_id)} {@const ModelIcon = getModelIcon(model.model_id)}
{/if}
{formatted.full}
{@const openRouterModel = modelsState .from(Provider.OpenRouter) .find((m) => m.id === model.model_id)} {#if openRouterModel && supportsImages(openRouterModel)}
{#snippet trigger(tooltip)}
{/snippet} Supports image anaylsis
{/if}
{:else}
selectModel(model.model_id)} class={cn( 'border-border flex h-40 w-32 flex-col items-center justify-center rounded-lg border p-2', 'relative select-none', 'data-selected:bg-accent/50 data-selected:text-accent-foreground', isSelected && 'border-reflect border-none' )} > {#if getModelIcon(model.model_id)} {@const ModelIcon = getModelIcon(model.model_id)}
{/if}
{formatted.primary}
{formatted.secondary}
{@const openRouterModel = modelsState .from(Provider.OpenRouter) .find((m) => m.id === model.model_id)} {#if openRouterModel && supportsImages(openRouterModel)}
{#snippet trigger(tooltip)}
{/snippet} Supports image anaylsis
{/if}
{/if} {/each}
{/each}
{/if}