Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 | 1x 1x 1x 1x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 1x 1x 24x 24x 24x 24x 24x 24x 24x 24x 4x 4x 2x 2x 4x 24x 24x 24x 24x 24x 24x 24x 24x 24x 1x 1x 24x 24x 2x 2x 24x 24x 1x 1x 24x 24x 24x 8x 7x 7x 8x 24x 29x 29x 53x 53x 29x 24x 1x 1x 1x 24x 24x 24x 24x 1x 1x 1x 23x 23x 24x 24x 26x 26x 26x 26x 26x 26x 26x 24x 26x 26x 4x 4x 4x 22x 22x 26x 21x 21x 21x 21x 21x 21x 26x 7x 7x 7x 22x 26x 24x 35x 35x 35x 35x 35x 35x 35x 35x 7x 7x 7x 7x 35x 34x 34x 34x 34x 34x 35x 5x 35x 35x 24x 6x 2x 2x 1x 1x 1x 1x 2x 5x 5x 4x 1x 1x 1x 1x 1x 6x 4x 4x 4x 4x 6x 24x 1x 29x 29x 5x 5x | import { App, Modal, Notice } from "obsidian";
import type LilbeePlugin from "../main";
import type { CatalogEntry, KeyStatus, ModelTask } from "../types";
import { CATALOG_SOURCE, KEY_STATUS, MODEL_TASK } from "../types";
import { MESSAGES } from "../locales/en";
import {
deepLinkToApiKeySettings,
frontierRowsOnly,
groupByProvider,
hasReadyFrontierRow,
localRowsOnly,
renderKeyStatusPill,
renderProviderPill,
} from "./catalog-helpers";
import { renderPill, PILL_CLS } from "../components/pill";
import { renderFitChip } from "../components/fit-chip";
import { tagModalChrome } from "../utils";
const SEARCH_DEBOUNCE_MS = 100;
const PAGE_SIZE = 50;
export type PickerScope = "chat" | "embedding";
export class ModelPickerModal extends Modal {
private plugin: LilbeePlugin;
private pickerScope: PickerScope;
private allRows: CatalogEntry[] = [];
private filteredRows: CatalogEntry[] = [];
private filterText = "";
private searchInputEl: HTMLInputElement | null = null;
private listEl: HTMLElement | null = null;
private highlightedIndex = 0;
private filterTimer: ReturnType<typeof setTimeout> | null = null;
constructor(app: App, plugin: LilbeePlugin, pickerScope: PickerScope) {
super(app);
this.plugin = plugin;
this.pickerScope = pickerScope;
tagModalChrome(this);
}
onOpen(): void {
const { contentEl } = this;
contentEl.empty();
contentEl.addClass("lilbee-model-picker-modal");
contentEl.createEl("h2", {
text: this.pickerScope === "chat" ? MESSAGES.MODEL_PICKER_TITLE_CHAT : MESSAGES.MODEL_PICKER_TITLE_EMBED,
});
this.renderSearchInput(contentEl);
this.listEl = contentEl.createDiv({ cls: "lilbee-model-picker-list" });
this.registerKeyHandlers();
void this.fetchAndRender();
}
onClose(): void {
if (this.filterTimer !== null) clearTimeout(this.filterTimer);
}
private renderSearchInput(parent: HTMLElement): void {
const wrap = parent.createDiv({ cls: "lilbee-model-picker-search" });
this.searchInputEl = wrap.createEl("input", {
cls: "lilbee-model-picker-search-input",
attr: { type: "text" },
placeholder: MESSAGES.MODEL_PICKER_SEARCH_PLACEHOLDER,
}) as HTMLInputElement;
this.searchInputEl.addEventListener("input", () => {
/* v8 ignore next */
const value = this.searchInputEl?.value ?? "";
if (this.filterTimer !== null) clearTimeout(this.filterTimer);
this.filterTimer = setTimeout(() => {
this.filterText = value;
this.applyFilterAndRender();
}, SEARCH_DEBOUNCE_MS);
});
setTimeout(() => this.searchInputEl?.focus(), 0);
}
private registerKeyHandlers(): void {
const scope = (
this as { scope?: { register: (mods: string[] | null, key: string, cb: () => unknown) => unknown } }
).scope;
/* v8 ignore next */
if (!scope || typeof scope.register !== "function") return;
scope.register([], "Enter", () => this.activateHighlighted());
scope.register([], "Escape", () => {
this.close();
return false;
});
scope.register([], "ArrowDown", () => {
this.moveHighlight(1);
return false;
});
scope.register([], "ArrowUp", () => {
this.moveHighlight(-1);
return false;
});
}
private moveHighlight(delta: number): void {
if (this.filteredRows.length === 0) return;
this.highlightedIndex = (this.highlightedIndex + delta + this.filteredRows.length) % this.filteredRows.length;
this.repaintHighlight();
}
private repaintHighlight(): void {
/* v8 ignore next */
if (!this.listEl) return;
const rows = this.listEl.querySelectorAll(".lilbee-model-picker-row");
for (let i = 0; i < rows.length; i++) {
rows[i].toggleClass("lilbee-model-picker-row-highlighted", i === this.highlightedIndex);
}
}
private activateHighlighted(): void {
const row = this.filteredRows[this.highlightedIndex];
/* v8 ignore next */
if (!row) return;
void this.activateRow(row);
}
private async fetchAndRender(): Promise<void> {
const taskFilter: ModelTask = this.pickerScope === "chat" ? MODEL_TASK.CHAT : MODEL_TASK.EMBEDDING;
const result = await this.plugin.api.catalog({ task: taskFilter, limit: PAGE_SIZE });
if (result.isErr()) {
new Notice(MESSAGES.ERROR_LOAD_CATALOG);
return;
}
// Defensive client-side filter: if the server returns rows whose
// declared task doesn't match what we asked for (older builds, or
// frontier providers tagged loosely), drop them so the chat picker
// never shows embedding/vision/rerank models and vice versa.
this.allRows = result.value.models.filter((m) => m.task === taskFilter);
this.applyFilterAndRender();
}
private applyFilterAndRender(): void {
const local = localRowsOnly(this.allRows);
const frontier = hasReadyFrontierRow(this.allRows) ? frontierRowsOnly(this.allRows) : [];
const visible = [...local, ...frontier];
this.filteredRows = filterRowsByText(visible, this.filterText);
this.highlightedIndex = 0;
this.renderList();
}
private renderList(): void {
/* v8 ignore next */
if (!this.listEl) return;
this.listEl.empty();
if (this.filteredRows.length === 0) {
this.listEl.createDiv({ cls: "lilbee-model-picker-empty", text: MESSAGES.MODEL_PICKER_EMPTY });
return;
}
const local = this.filteredRows.filter((r) => r.source !== CATALOG_SOURCE.FRONTIER);
const frontier = this.filteredRows.filter((r) => r.source === CATALOG_SOURCE.FRONTIER);
if (local.length > 0) {
this.listEl.createDiv({
cls: "lilbee-model-picker-section-header",
text: MESSAGES.MODEL_PICKER_LOCAL_HEADING,
});
for (const row of local) this.renderRow(this.listEl, row);
}
for (const [provider, group] of groupByProvider(frontier)) {
this.listEl.createDiv({ cls: "lilbee-model-picker-section-header", text: provider });
for (const row of group) this.renderRow(this.listEl, row);
}
this.repaintHighlight();
}
private renderRow(parent: HTMLElement, row: CatalogEntry): void {
const rowEl = parent.createDiv({ cls: "lilbee-model-picker-row" });
const nameRow = rowEl.createDiv({ cls: "lilbee-model-picker-row-name" });
nameRow.createSpan({ text: row.display_name, cls: "lilbee-model-picker-row-display" });
if (row.installed) {
renderPill(nameRow, MESSAGES.LABEL_INSTALLED, PILL_CLS.INSTALLED);
}
renderFitChip(nameRow, row.fit);
if (row.source === CATALOG_SOURCE.FRONTIER) {
const frontier = row as CatalogEntry & { provider?: string; key_status?: KeyStatus };
/* v8 ignore next 2 */
const provider = frontier.provider ?? "";
const keyStatus = frontier.key_status ?? KEY_STATUS.MISSING_KEY;
renderProviderPill(nameRow, provider);
renderKeyStatusPill(nameRow, keyStatus);
}
if (row.size_gb > 0) {
rowEl.createDiv({
cls: "lilbee-model-picker-row-meta",
text: `${row.size_gb} GB${row.quality_tier ? ` ยท ${row.quality_tier}` : ""}`,
});
}
rowEl.addEventListener("click", () => {
void this.activateRow(row);
});
}
private async activateRow(row: CatalogEntry): Promise<void> {
if (row.source === CATALOG_SOURCE.FRONTIER) {
const frontier = row as CatalogEntry & { provider?: string; key_status?: KeyStatus };
/* v8 ignore next */
const keyStatus = frontier.key_status ?? KEY_STATUS.MISSING_KEY;
if (keyStatus === KEY_STATUS.MISSING_KEY) {
/* v8 ignore next */
const provider = frontier.provider ?? "";
this.close();
deepLinkToApiKeySettings(this.app, provider);
return;
}
}
const result =
this.pickerScope === "chat"
? await this.plugin.api.setChatModel(row.hf_repo)
: await this.plugin.api.setEmbeddingModel(row.hf_repo);
if (result.isErr()) {
new Notice(MESSAGES.ERROR_SET_MODEL.replace("{model}", row.hf_repo));
return;
}
if (this.pickerScope === "chat") this.plugin.activeModel = row.hf_repo;
this.plugin.fetchActiveModel();
this.plugin.refreshSettingsTab();
new Notice(MESSAGES.NOTICE_MODEL_ACTIVATED(row.display_name));
this.close();
}
}
export function filterRowsByText(rows: CatalogEntry[], text: string): CatalogEntry[] {
const trimmed = text.trim().toLowerCase();
if (trimmed === "") return rows;
return rows.filter((r) => r.display_name.toLowerCase().includes(trimmed));
}
|