| 101 | } |
| 102 | |
| 103 | private renderList() { |
| 104 | const list = this.contentEl.querySelector(".qa-model-directory"); |
| 105 | if (!list) return; |
| 106 | list.empty(); |
| 107 | |
| 108 | if (this.filtered.length === 0) { |
| 109 | const message = this.loadError |
| 110 | ? `Couldn't load models: ${this.loadError}. Check the API key and endpoint.` |
| 111 | : this.allModels.length === 0 |
| 112 | ? "No models available for this provider." |
| 113 | : "No models match your filter."; |
| 114 | (list as HTMLElement).createDiv({ |
| 115 | text: message, |
| 116 | cls: "qa-model-directory-empty", |
| 117 | }); |
| 118 | return; |
| 119 | } |
| 120 | |
| 121 | for (const m of this.filtered) { |
| 122 | // Wrap the checkbox and name in a <label> so clicking the model text |
| 123 | // toggles it and screen readers get a labelled control. |
| 124 | const row = (list as HTMLElement).createEl("label", { |
| 125 | cls: "qa-model-row", |
| 126 | }); |
| 127 | |
| 128 | const cb = this.contentEl.ownerDocument.createElement("input"); |
| 129 | cb.type = "checkbox"; |
| 130 | cb.checked = this.selectedIds.has(m.name); |
| 131 | cb.onchange = () => { |
| 132 | if (cb.checked) this.selectedIds.add(m.name); |
| 133 | else this.selectedIds.delete(m.name); |
| 134 | }; |
| 135 | row.appendChild(cb); |
| 136 | |
| 137 | row.createDiv({ text: m.name, cls: "qa-model-row-title" }); |
| 138 | |
| 139 | row.createDiv({ |
| 140 | text: `${m.maxTokens.toLocaleString()} tokens max`, |
| 141 | cls: "qa-model-row-meta", |
| 142 | }); |
| 143 | } |
| 144 | } |
| 145 | |
| 146 | private importSelected() { |
| 147 | if (this.selectedIds.size === 0) { |