Method buildModelOptionHTML

chat/components/ModelPicker.js:344–384

* Builds HTML for a single model option. * @param {Object} model - Model object * @returns {string} HTML string

(model)

        // Render all unpinned models sorted alphabetically by display name
        const sortedModels = [...unpinnedModels].sort((a, b) =>
            a.name.localeCompare(b.name)
        );
        if (sortedModels.length > 0) {
            html += `
                <div class="mb-3">
                    <div class="model-category-header px-2 py-1 text-xs font-medium text-muted-foreground">All Models</div>
                    <div class="space-y-0">
                        ${sortedModels.map(model => this.buildModelOptionHTML(model)).join('')}
                    </div>
                </div>
            `;
        }

        this.app.elements.modelsList.innerHTML = html;

        // Auto-highlight first item so user can immediately press Enter
        const modelOptions = this.getModelOptions();
        if (modelOptions.length > 0) {
            this.highlightedIndex = 0;
            this.updateHighlight(modelOptions, skipAutoScroll);
        }
    }

    warmRender() {
        if (this.app.state.modelsLoading || this.app.state.models.length === 0) {
            return;
        }
        const renderSignature = this.getRenderSignature('');
        if (this.hasRenderedOnce && renderSignature === this.lastRenderSignature) {
            return;
        }
        const schedule = typeof requestIdleCallback === 'function'
            ? (callback) => requestIdleCallback(callback, { timeout: 500 })
            : (callback) => setTimeout(callback, 0);
        schedule(() => {
            if (this.app.elements.modelPickerModal.classList.contains('hidden')) {
                this.renderModels('', true);
            }
        });
    }

    /**
     * Builds HTML for a single model option.