Jade/views/partials/popover-models.html

<div class="dropdown is-hoverable is-up is-right">
    <div class="dropdown-trigger">
        <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
            <span class="icon"><i class="fa-solid fa-robot"></i></span>
        </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu4" role="menu">
        <div class="dropdown-content is-small">
            <div class="dropdown-item">
                {% for LLM in LLMs %}
                <!-- Added "has-text" as a default class -->
                <div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
                    value="{{ LLM.ID.String() }}">
                    <span class="icon">
                        <img src="{{ LLM.Model.Company.Icon }}" />
                    </span>
                    <span>{{ LLM.Name }}</span>
                </div>
                {% endfor %}
                <div class="is-flex is-justify-content-flex-end">
                    <button class="button is-small is-primary is-outlined mr-2">
                        <span class="icon">
                            <i class="fa-solid fa-pen"></i>
                        </span>
                    </button>
                    <button class="button is-small is-success is-outlined">
                        <span class="icon">
                            <i class="fa-solid fa-plus"></i>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let lastSelectedIndex = null;

        document.addEventListener('keydown', function (event) {
            if (event.key === 'Shift') {
                document.body.classList.add('shift-pressed');
            }
        });

        document.addEventListener('keyup', function (event) {
            // If Shift is press and id="chat-input-textarea" not focused
            if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea') {
                document.body.classList.remove('shift-pressed');
                lastSelectedIndex = null;

                // Remove all "shiftselected" classes
                const elements = Array.from(document.getElementsByClassName('icon-text'));
                for (let i = 0; i < elements.length; i++) {
                    elements[i].classList.remove('shiftselected');
                }

                window.getSelection().removeAllRanges();
            }
        });

        function toggleSelection(element) {
            const elements = Array.from(document.getElementsByClassName('icon-text'));
            const index = elements.indexOf(element);

            if (document.body.classList.contains('shift-pressed') && lastSelectedIndex !== null) {
                const [start, end] = [lastSelectedIndex, index].sort((a, b) => a - b);
                let allSelected = true;
                for (let i = start; i <= end; i++) {
                    if (!elements[i].classList.contains('selected')) {
                        allSelected = false;
                        break;
                    }
                }
                for (let i = start; i <= end; i++) {
                    if (allSelected) {
                        elements[i].classList.remove('selected');
                        elements[i].classList.add('unselected');
                    } else {
                        elements[i].classList.add('selected');
                        elements[i].classList.remove('unselected');
                    }
                }
                lastSelectedIndex = null;

                const elements2 = Array.from(document.getElementsByClassName('icon-text'));
                for (let i = 0; i < elements2.length; i++) {
                    elements2[i].classList.remove('shiftselected');
                }
            } else if (document.body.classList.contains('shift-pressed') && lastSelectedIndex === null) {
                lastSelectedIndex = index;
                element.classList.toggle('shiftselected');
            } else {
                element.classList.toggle('selected');
                element.classList.toggle('unselected');
            }
            toggleSendButton();
        }

        document.addEventListener('click', function (event) {
            if (event.shiftKey) {
                event.preventDefault();
            }
        });

        function getSelectedModelsIDs() {
            var selectedModelsIDs = [];
            var selectedModels = document.getElementsByClassName('selected');
            for (var i = 0; i < selectedModels.length; i++) {
                selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
            }
            return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
        }
    </script>

    <style>
        .selected {
            border: 2px solid #126d0f;
            border-radius: 4px;
            padding: 1px;
            margin: 2px;
        }

        .unselected {
            border-radius: 4px;
            padding: 3px;
        }

        .shiftselected {
            background: #126d0f;
            border-radius: 4px;
            padding: 1px;
            margin: 2px;
        }

        .shift-pressed *::selection {
            background: transparent;
        }
    </style>