maplibre-gl-geoagent 0.5.1 → 0.5.2

package/dist/{GeoAgentControl-J26MMwe5.cjs → GeoAgentControl-DdRAg6Nf.cjs}

@@ -3519,7 +3519,7 @@ class HttpProtocol extends SerdeContext {
     });
   }
   async loadEventStreamCapability() {
-    const { EventStreamSerde } = await Promise.resolve().then(() => require("./index-cO0gccGg.cjs"));
+    const { EventStreamSerde } = await Promise.resolve().then(() => require("./index-TSQ43SxX.cjs"));
     return new EventStreamSerde({
       marshaller: this.getEventStreamMarshaller(),
       serializer: this.serializer,
@@ -42665,7 +42665,7 @@ class EarthEngineService {
   }
   async loadEe() {
     if (!this.eePromise) {
-      this.eePromise = Promise.resolve().then(() => require("./browser-ZyWGgIdV.cjs")).then((n) => n.browser).then((module2) => {
+      this.eePromise = Promise.resolve().then(() => require("./browser-tB9M0iL7.cjs")).then((n) => n.browser).then((module2) => {
         const imported = "default" in module2 ? module2.default : module2;
         const ee = imported;
         const scope2 = globalThis;
@@ -46073,6 +46073,15 @@ const _GeoAgentControl = class _GeoAgentControl {
     __publicField(this, "verifyToken", 0);
     __publicField(this, "configNoteTimer", null);
     __publicField(this, "modelListId", `geoagent-model-list-${_GeoAgentControl.instanceCount += 1}`);
+    // Loaded model names backing the custom suggestion dropdown. A native
+    // <datalist> is intentionally avoided: clicking the model field to open
+    // Chrome's native datalist popup with a long list hangs the renderer.
+    __publicField(this, "modelOptions", []);
+    // Index of the highlighted suggestion (-1 = none), and the values currently
+    // rendered in the dropdown (the filtered subset).
+    __publicField(this, "activeSuggestion", -1);
+    __publicField(this, "renderedSuggestions", []);
+    __publicField(this, "suggestionBlurTimer", null);
     // Whether the agent was configured at the last control refresh, used to fold
     // the settings section away the first time setup completes.
     __publicField(this, "wasConfigured", false);
@@ -46159,6 +46168,10 @@ const _GeoAgentControl = class _GeoAgentControl {
       clearTimeout(this.configNoteTimer);
       this.configNoteTimer = null;
     }
+    if (this.suggestionBlurTimer !== null) {
+      clearTimeout(this.suggestionBlurTimer);
+      this.suggestionBlurTimer = null;
+    }
     this.verifyToken++;
     (_a3 = this.activeAbortController) == null ? void 0 : _a3.abort();
     (_b3 = this.agent) == null ? void 0 : _b3.cancel();
@@ -46387,10 +46400,10 @@ const _GeoAgentControl = class _GeoAgentControl {
           <label class="geoagent-model-cell">
             Model
             <div class="geoagent-model-row">
-              <input class="geoagent-model-id" list="${this.modelListId}" autocomplete="off" />
+              <input class="geoagent-model-id" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="${this.modelListId}" />
               <button class="geoagent-load-models secondary" type="button">Load models</button>
             </div>
-            <datalist class="geoagent-model-list" id="${this.modelListId}"></datalist>
+            <ul class="geoagent-model-suggestions" id="${this.modelListId}" role="listbox" hidden></ul>
           </label>
           <div class="geoagent-config-note" aria-live="polite" hidden></div>
         </div>
@@ -46446,7 +46459,7 @@ const _GeoAgentControl = class _GeoAgentControl {
       baseUrlLabel: this.requiredElement(content, ".geoagent-base-url-row"),
       baseUrlInput: this.requiredElement(content, ".geoagent-base-url"),
       modelIdInput: this.requiredElement(content, ".geoagent-model-id"),
-      modelList: this.requiredElement(content, ".geoagent-model-list"),
+      modelSuggestions: this.requiredElement(content, ".geoagent-model-suggestions"),
       loadModelsButton: this.requiredElement(content, ".geoagent-load-models"),
       configNote: this.requiredElement(content, ".geoagent-config-note"),
       bedrockRegionLabel: this.requiredElement(content, ".geoagent-bedrock-region-row"),
@@ -46615,6 +46628,29 @@ const _GeoAgentControl = class _GeoAgentControl {
       this.invalidateAgent();
       this.updateControls();
       this.emit("statechange");
+      this.openModelSuggestions();
+    });
+    ui.modelIdInput.addEventListener(
+      "focus",
+      () => this.openModelSuggestions(false)
+    );
+    ui.modelIdInput.addEventListener(
+      "keydown",
+      (event) => this.handleModelKeydown(event)
+    );
+    ui.modelIdInput.addEventListener("blur", () => {
+      this.suggestionBlurTimer = setTimeout(
+        () => this.closeModelSuggestions(),
+        150
+      );
+    });
+    ui.modelSuggestions.addEventListener("mousedown", (event) => {
+      const item = event.target.closest("li[data-value]");
+      if (!item) {
+        return;
+      }
+      event.preventDefault();
+      this.selectModelSuggestion(item.getAttribute("data-value") ?? "");
     });
     ui.bedrockRegionInput.addEventListener("input", () => {
       const region = ui.bedrockRegionInput.value.trim();
@@ -47231,16 +47267,125 @@ ${markdown.trim()}`;
     }
   }
   populateModelOptions(models) {
+    this.modelOptions = models;
+    if (this.ui && !this.ui.modelSuggestions.hidden) {
+      this.openModelSuggestions(false);
+    }
+  }
+  filterModelOptions(query) {
+    const needle = query.trim().toLowerCase();
+    const matches = needle ? this.modelOptions.filter(
+      (model) => model.toLowerCase().includes(needle)
+    ) : this.modelOptions;
+    return matches.slice(0, _GeoAgentControl.MAX_SUGGESTIONS);
+  }
+  /**
+   * Open (or refresh) the custom model suggestion dropdown. With `useFilter`
+   * (typing) the list narrows to the current input value; without it (focus,
+   * arrow keys) the full loaded list is shown so the user can browse even when
+   * the field already holds the default model.
+   */
+  openModelSuggestions(useFilter = true) {
     if (!this.ui) {
       return;
     }
-    const list = this.ui.modelList;
-    list.replaceChildren();
-    for (const model of models) {
-      const option = document.createElement("option");
-      option.value = model;
-      list.appendChild(option);
+    if (this.suggestionBlurTimer !== null) {
+      clearTimeout(this.suggestionBlurTimer);
+      this.suggestionBlurTimer = null;
+    }
+    const filtered = this.filterModelOptions(
+      useFilter ? this.ui.modelIdInput.value : ""
+    );
+    if (filtered.length === 0) {
+      this.closeModelSuggestions();
+      return;
+    }
+    this.renderedSuggestions = filtered;
+    this.activeSuggestion = -1;
+    const list = this.ui.modelSuggestions;
+    list.replaceChildren(
+      ...filtered.map((model, index) => {
+        const item = document.createElement("li");
+        item.className = "geoagent-model-suggestion";
+        item.setAttribute("role", "option");
+        item.dataset.value = model;
+        item.id = `${this.modelListId}-opt-${index}`;
+        item.textContent = model;
+        return item;
+      })
+    );
+    list.hidden = false;
+    this.ui.modelIdInput.setAttribute("aria-expanded", "true");
+  }
+  closeModelSuggestions() {
+    if (this.suggestionBlurTimer !== null) {
+      clearTimeout(this.suggestionBlurTimer);
+      this.suggestionBlurTimer = null;
+    }
+    this.renderedSuggestions = [];
+    this.activeSuggestion = -1;
+    if (this.ui) {
+      this.ui.modelSuggestions.hidden = true;
+      this.ui.modelSuggestions.replaceChildren();
+      this.ui.modelIdInput.setAttribute("aria-expanded", "false");
+      this.ui.modelIdInput.removeAttribute("aria-activedescendant");
+    }
+  }
+  selectModelSuggestion(value) {
+    if (!this.ui || !value) {
+      return;
+    }
+    this.ui.modelIdInput.value = value;
+    this.ui.modelIdInput.dispatchEvent(new Event("input", { bubbles: true }));
+    this.closeModelSuggestions();
+  }
+  handleModelKeydown(event) {
+    if (!this.ui) {
+      return;
+    }
+    if (event.key === "Escape") {
+      if (!this.ui.modelSuggestions.hidden) {
+        event.stopPropagation();
+        this.closeModelSuggestions();
+      }
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      if (this.ui.modelSuggestions.hidden) {
+        this.openModelSuggestions(false);
+        if (this.ui.modelSuggestions.hidden) {
+          return;
+        }
+      }
+      event.preventDefault();
+      const last = this.renderedSuggestions.length - 1;
+      if (event.key === "ArrowDown") {
+        this.activeSuggestion = this.activeSuggestion >= last ? 0 : this.activeSuggestion + 1;
+      } else {
+        this.activeSuggestion = this.activeSuggestion <= 0 ? last : this.activeSuggestion - 1;
+      }
+      this.highlightActiveSuggestion();
+      return;
     }
+    if (event.key === "Enter" && this.activeSuggestion >= 0) {
+      event.preventDefault();
+      this.selectModelSuggestion(this.renderedSuggestions[this.activeSuggestion]);
+    }
+  }
+  highlightActiveSuggestion() {
+    if (!this.ui) {
+      return;
+    }
+    const items2 = this.ui.modelSuggestions.querySelectorAll("li");
+    items2.forEach((item, index) => {
+      var _a3;
+      const active = index === this.activeSuggestion;
+      item.classList.toggle("active", active);
+      if (active) {
+        item.scrollIntoView({ block: "nearest" });
+        (_a3 = this.ui) == null ? void 0 : _a3.modelIdInput.setAttribute("aria-activedescendant", item.id);
+      }
+    });
   }
   normalizeBaseUrl(baseUrl) {
     return baseUrl.trim().replace(/\/+$/, "");
@@ -47377,7 +47522,7 @@ ${markdown.trim()}`;
   }
   async createProviderModel(providerId, modelId, apiKey, bedrockRegion, baseUrl) {
     if (providerId === "openai-responses" || providerId === "openai-chat") {
-      const { OpenAIModel } = await Promise.resolve().then(() => require("./index-D7y77wpc.cjs"));
+      const { OpenAIModel } = await Promise.resolve().then(() => require("./index-GeIdoDMK.cjs"));
       return new OpenAIModel({
         api: providerId === "openai-responses" ? "responses" : "chat",
         modelId,
@@ -47388,7 +47533,7 @@ ${markdown.trim()}`;
       });
     }
     if (providerId === "openai-compatible") {
-      const { OpenAIModel } = await Promise.resolve().then(() => require("./index-D7y77wpc.cjs"));
+      const { OpenAIModel } = await Promise.resolve().then(() => require("./index-GeIdoDMK.cjs"));
       return new OpenAIModel({
         api: "chat",
         modelId,
@@ -47400,7 +47545,7 @@ ${markdown.trim()}`;
       });
     }
     if (providerId === "anthropic") {
-      const { AnthropicModel } = await Promise.resolve().then(() => require("./anthropic-D2xJ9IO4.cjs"));
+      const { AnthropicModel } = await Promise.resolve().then(() => require("./anthropic-DN5bZZYl.cjs"));
       return new AnthropicModel({
         modelId,
         apiKey,
@@ -47410,7 +47555,7 @@ ${markdown.trim()}`;
       });
     }
     if (providerId === "google") {
-      const { GoogleModel } = await Promise.resolve().then(() => require("./index-DHGV30Mr.cjs"));
+      const { GoogleModel } = await Promise.resolve().then(() => require("./index-CMusYhSC.cjs"));
       return new GoogleModel({
         modelId,
         apiKey
@@ -47619,9 +47764,13 @@ ${BROWSER_MAPLIBRE_CODE_SYSTEM_PROMPT}` : BROWSER_MAPLIBRE_SYSTEM_PROMPT;
     }
   }
 };
-// Unique per control instance so the model <input list> and its <datalist>
-// pair up even when several controls share a page.
+// Unique per control instance so the model input's aria-controls points at its
+// own suggestion list even when several controls share a page.
 __publicField(_GeoAgentControl, "instanceCount", 0);
+// Cap on rendered suggestion rows. The dropdown filters as the user types, so
+// this only bounds the initial/unfiltered view and keeps a pathological model
+// list (thousands of fine-tunes) from building a huge DOM list.
+__publicField(_GeoAgentControl, "MAX_SUGGESTIONS", 100);
 let GeoAgentControl = _GeoAgentControl;
 exports.ContextWindowOverflowError = ContextWindowOverflowError;
 exports.DEFAULT_BASEMAPS = DEFAULT_BASEMAPS;
@@ -47649,4 +47798,4 @@ exports.toJsonValue = toJsonValue;
 exports.toMimeType = toMimeType;
 exports.toUtf8 = toUtf8;
 exports.warnOnce = warnOnce;
-//# sourceMappingURL=GeoAgentControl-J26MMwe5.cjs.map
+//# sourceMappingURL=GeoAgentControl-DdRAg6Nf.cjs.map