maplibre-gl-geoagent 0.4.2 → 0.4.4

package/dist/{GeoAgentControl-NjhimZRg.cjs → GeoAgentControl-BYfsQsUU.cjs}

@@ -3519,7 +3519,7 @@ class HttpProtocol extends SerdeContext {
     });
   }
   async loadEventStreamCapability() {
-    const { EventStreamSerde } = await Promise.resolve().then(() => require("./index-DUXFjmo_.cjs"));
+    const { EventStreamSerde } = await Promise.resolve().then(() => require("./index-BNkHglHv.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-DfKdZvWC.cjs")).then((n) => n.browser).then((module2) => {
+      this.eePromise = Promise.resolve().then(() => require("./browser-BtM59MC_.cjs")).then((n) => n.browser).then((module2) => {
         const imported = "default" in module2 ? module2.default : module2;
         const ee = imported;
         const scope2 = globalThis;
@@ -45919,6 +45919,9 @@ ${code2}
 }
 const DEFAULT_PROVIDER = "openai-responses";
 const DEFAULT_STORAGE_PREFIX = "geoagent.maplibre";
+const STATUS_READY = "Ready";
+const STATUS_SETUP = "Setup required";
+const IDLE_STATUS_LABELS = /* @__PURE__ */ new Set([STATUS_READY, STATUS_SETUP]);
 const BASE_PROVIDER_CONFIGS = {
   "openai-responses": {
     id: "openai-responses",
@@ -46025,7 +46028,6 @@ class GeoAgentControl {
     __publicField(this, "eventHandlers", new globalThis.Map());
     __publicField(this, "resizeHandler", null);
     __publicField(this, "mapResizeHandler", null);
-    __publicField(this, "clickOutsideHandler", null);
     __publicField(this, "panelResizeMoveHandler", null);
     __publicField(this, "panelResizeUpHandler", null);
     __publicField(this, "activeAbortController", null);
@@ -46037,6 +46039,9 @@ class GeoAgentControl {
       panelWidth: options.panelWidth ?? 390,
       panelMinWidth: options.panelMinWidth ?? 320,
       panelMaxWidth: options.panelMaxWidth ?? 720,
+      panelHeight: options.panelHeight,
+      panelMinHeight: options.panelMinHeight ?? 320,
+      panelMaxHeight: options.panelMaxHeight ?? 2e3,
       className: options.className ?? "",
       defaultProvider: options.defaultProvider ?? DEFAULT_PROVIDER,
       storagePrefix: options.storagePrefix ?? DEFAULT_STORAGE_PREFIX,
@@ -46052,6 +46057,7 @@ class GeoAgentControl {
     this.state = {
       collapsed: this.options.collapsed,
       panelWidth: this.constrainPanelWidth(this.options.panelWidth),
+      panelHeight: this.options.panelHeight !== void 0 ? this.constrainPanelHeight(this.options.panelHeight) : void 0,
       busy: false,
       providerId,
       modelId: this.initialModelId(providerId),
@@ -46080,8 +46086,8 @@ class GeoAgentControl {
     });
     this.setupEventListeners();
     this.loadProviderSettings();
-    this.setStatus("Ready", "connected");
-    this.appendLog("system", "Browser-only Strands MapLibre agent ready.");
+    this.applyIdleStatus(true);
+    this.appendLog("system", this.readyLogMessage());
     this.updateControls();
     if (!this.state.collapsed) {
       this.panel.classList.add("expanded");
@@ -46099,10 +46105,6 @@ class GeoAgentControl {
       this.map.off("resize", this.mapResizeHandler);
       this.mapResizeHandler = null;
     }
-    if (this.clickOutsideHandler) {
-      document.removeEventListener("click", this.clickOutsideHandler);
-      this.clickOutsideHandler = null;
-    }
     this.stopPanelResize();
     (_a3 = this.activeAbortController) == null ? void 0 : _a3.abort();
     (_b3 = this.agent) == null ? void 0 : _b3.cancel();
@@ -46142,6 +46144,11 @@ class GeoAgentControl {
       this.state.panelWidth = panelWidth;
       this.panel.style.width = `${panelWidth}px`;
     }
+    if (newState.panelHeight !== void 0 && this.panel) {
+      const panelHeight = this.constrainPanelHeight(newState.panelHeight);
+      this.state.panelHeight = panelHeight;
+      this.panel.style.height = `${panelHeight}px`;
+    }
     if (collapsedChanged) {
       if (this.state.collapsed) {
         (_a3 = this.panel) == null ? void 0 : _a3.classList.remove("expanded");
@@ -46267,6 +46274,9 @@ class GeoAgentControl {
     const panel = document.createElement("div");
     panel.className = "geoagent-panel";
     panel.style.width = `${this.state.panelWidth}px`;
+    if (this.state.panelHeight !== void 0) {
+      panel.style.height = `${this.state.panelHeight}px`;
+    }
     const header = document.createElement("div");
     header.className = "geoagent-panel-header";
     const title2 = document.createElement("span");
@@ -46280,11 +46290,12 @@ class GeoAgentControl {
     const closeButton = document.createElement("button");
     closeButton.className = "geoagent-icon-button";
     closeButton.type = "button";
-    closeButton.title = "Collapse panel";
-    closeButton.setAttribute("aria-label", "Collapse panel");
+    closeButton.title = "Close";
+    closeButton.setAttribute("aria-label", "Close");
     closeButton.innerHTML = `
       <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="m18 15-6-6-6 6"></path>
+        <path d="M18 6 6 18"></path>
+        <path d="m6 6 12 12"></path>
       </svg>
     `;
     closeButton.addEventListener("click", () => this.collapse());
@@ -46350,13 +46361,9 @@ class GeoAgentControl {
         </div>
       </form>
     `;
-    const resizeHandle = document.createElement("div");
-    resizeHandle.className = "geoagent-panel-resize-handle";
-    resizeHandle.setAttribute("role", "separator");
-    resizeHandle.setAttribute("aria-orientation", "vertical");
-    resizeHandle.setAttribute("aria-label", "Resize GeoAgent panel");
-    resizeHandle.addEventListener("mousedown", (event) => this.startPanelResize(event));
-    panel.append(header, content, resizeHandle);
+    const resizeHandleLeft = this.createResizeHandle("bottom-left");
+    const resizeHandleRight = this.createResizeHandle("bottom-right");
+    panel.append(header, content, resizeHandleLeft, resizeHandleRight);
     this.ui = {
       status,
       providerSelect: this.requiredElement(content, ".geoagent-provider"),
@@ -46379,7 +46386,8 @@ class GeoAgentControl {
       cancelButton: this.requiredElement(content, ".geoagent-cancel"),
       clearButton: this.requiredElement(content, ".geoagent-clear"),
       copyButton: this.requiredElement(content, ".geoagent-copy"),
-      resizeHandle,
+      resizeHandleLeft,
+      resizeHandleRight,
       closeButton
     };
     this.ui.permissionRow.hidden = !this.options.showPermissionToggles;
@@ -46576,13 +46584,6 @@ class GeoAgentControl {
   }
   setupEventListeners() {
     var _a3;
-    this.clickOutsideHandler = (event) => {
-      const target = event.target;
-      if (this.container && this.panel && !this.container.contains(target) && !this.panel.contains(target)) {
-        this.collapse();
-      }
-    };
-    document.addEventListener("click", this.clickOutsideHandler);
     this.resizeHandler = () => {
       if (!this.state.collapsed) {
         this.updatePanelPosition();
@@ -46655,23 +46656,67 @@ class GeoAgentControl {
       Math.min(this.options.panelMaxWidth, Math.round(width))
     );
   }
-  startPanelResize(event) {
-    if (!this.panel) {
+  constrainPanelHeight(height) {
+    var _a3;
+    let max = this.options.panelMaxHeight;
+    const mapHeight = ((_a3 = this.mapContainer) == null ? void 0 : _a3.clientHeight) ?? 0;
+    if (mapHeight > 0) {
+      max = Math.min(max, mapHeight - 20);
+    }
+    return Math.max(
+      this.options.panelMinHeight,
+      Math.min(max, Math.round(height))
+    );
+  }
+  createResizeHandle(corner) {
+    const handle = document.createElement("div");
+    const side = corner === "bottom-left" ? "bl" : "br";
+    handle.className = `geoagent-panel-resize-handle geoagent-panel-resize-handle-${side}`;
+    handle.setAttribute("role", "separator");
+    handle.setAttribute("aria-label", "Resize GeoAgent panel");
+    handle.addEventListener("mousedown", (event) => this.startPanelResize(event, corner));
+    return handle;
+  }
+  startPanelResize(event, corner) {
+    if (!this.panel || !this.mapContainer) {
       return;
     }
     event.preventDefault();
     event.stopPropagation();
-    const position = this.getControlPosition();
-    const resizeDirection = position === "top-left" || position === "bottom-left" ? 1 : -1;
-    const startX = event.clientX;
-    const startWidth = this.panel.getBoundingClientRect().width || this.state.panelWidth;
     this.stopPanelResize();
+    const panelRect = this.panel.getBoundingClientRect();
+    const mapRect = this.mapContainer.getBoundingClientRect();
+    this.panel.style.top = `${panelRect.top - mapRect.top}px`;
+    this.panel.style.bottom = "";
+    if (corner === "bottom-left") {
+      this.panel.style.right = `${mapRect.right - panelRect.right}px`;
+      this.panel.style.left = "";
+    } else {
+      this.panel.style.left = `${panelRect.left - mapRect.left}px`;
+      this.panel.style.right = "";
+    }
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const startWidth = panelRect.width || this.state.panelWidth;
+    const startHeight = panelRect.height || this.state.panelHeight || this.options.panelMinHeight;
+    const widthDirection = corner === "bottom-left" ? -1 : 1;
+    const gap = 8;
+    const hasLayout = mapRect.width > 0 && mapRect.height > 0;
+    const maxWidth = !hasLayout ? Number.POSITIVE_INFINITY : corner === "bottom-left" ? panelRect.right - mapRect.left - gap : mapRect.right - panelRect.left - gap;
+    const maxHeight = !hasLayout ? Number.POSITIVE_INFINITY : mapRect.bottom - panelRect.top - gap;
     this.panel.classList.add("resizing");
     document.body.classList.add("geoagent-panel-resizing");
     this.panelResizeMoveHandler = (moveEvent) => {
       moveEvent.preventDefault();
-      const nextWidth = startWidth + (moveEvent.clientX - startX) * resizeDirection;
-      this.setState({ panelWidth: nextWidth });
+      const width = Math.min(
+        maxWidth,
+        startWidth + (moveEvent.clientX - startX) * widthDirection
+      );
+      const height = Math.min(
+        maxHeight,
+        startHeight + (moveEvent.clientY - startY)
+      );
+      this.setState({ panelWidth: width, panelHeight: height });
     };
     this.panelResizeUpHandler = () => this.stopPanelResize();
     document.addEventListener("mousemove", this.panelResizeMoveHandler);
@@ -46702,7 +46747,6 @@ class GeoAgentControl {
     this.ui.bedrockRegionLabel.hidden = this.state.providerId !== "bedrock";
     this.ui.allowCodeInput.checked = this.state.allowCodeExecution;
     this.ui.allowDestructiveInput.checked = this.state.allowDestructiveTools;
-    this.ui.closeButton.setAttribute("aria-expanded", String(!this.state.collapsed));
   }
   currentProviderId() {
     var _a3;
@@ -46740,6 +46784,68 @@ class GeoAgentControl {
     this.ui.status.textContent = text2;
     this.ui.status.className = `geoagent-status ${kind}`.trim();
   }
+  /**
+   * Whether the agent has everything it needs to run a prompt for the current
+   * provider: an API key, a model id, and (for Bedrock) a region.
+   */
+  isConfigured() {
+    if (!this.ui) {
+      return false;
+    }
+    if (!this.ui.apiKeyInput.value.trim() || !this.ui.modelIdInput.value.trim()) {
+      return false;
+    }
+    if (this.state.providerId === "bedrock" && !this.ui.bedrockRegionInput.value.trim()) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Human-readable, comma-separated list of the configuration fields that are
+   * still missing for the current provider (empty when fully configured).
+   */
+  missingConfigSummary() {
+    if (!this.ui) {
+      return "";
+    }
+    const missing = [];
+    if (!this.ui.apiKeyInput.value.trim()) {
+      missing.push(this.currentProviderConfig().keyLabel);
+    }
+    if (!this.ui.modelIdInput.value.trim()) {
+      missing.push("model");
+    }
+    if (this.state.providerId === "bedrock" && !this.ui.bedrockRegionInput.value.trim()) {
+      missing.push("region");
+    }
+    return missing.join(", ");
+  }
+  readyLogMessage() {
+    if (this.isConfigured()) {
+      return "Browser-only Strands MapLibre agent ready.";
+    }
+    const missing = this.missingConfigSummary();
+    return missing ? `Browser-only Strands MapLibre agent loaded. Add your ${missing} to start.` : "Browser-only Strands MapLibre agent loaded.";
+  }
+  /**
+   * Refresh the idle status badge so it reflects whether the agent has the
+   * credentials it needs. Transient run statuses (Running, Cancelled, Error,
+   * Copied) are left untouched unless `force` is set, so this can be called
+   * from updateControls() on every keystroke without clobbering them.
+   */
+  applyIdleStatus(force = false) {
+    if (!this.ui || this.state.busy && !force) {
+      return;
+    }
+    if (!force && !IDLE_STATUS_LABELS.has(this.ui.status.textContent ?? "")) {
+      return;
+    }
+    if (this.isConfigured()) {
+      this.setStatus(STATUS_READY, "connected");
+    } else {
+      this.setStatus(STATUS_SETUP, "setup");
+    }
+  }
   appendLog(role, text2, markdown = text2) {
     if (!this.ui) {
       throw new Error("GeoAgent control UI is not mounted.");
@@ -46816,16 +46922,24 @@ ${markdown.trim()}`;
       textarea.remove();
     }
     this.setStatus("Copied", "connected");
-    window.setTimeout(() => this.setStatus("Ready", "connected"), 1200);
+    window.setTimeout(() => this.applyIdleStatus(true), 1200);
   }
   updateControls() {
     if (!this.ui) {
       return;
     }
-    this.ui.sendButton.disabled = this.state.busy || !this.ui.prompt.value.trim() || !this.ui.apiKeyInput.value.trim() || !this.ui.modelIdInput.value.trim() || this.state.providerId === "bedrock" && !this.ui.bedrockRegionInput.value.trim();
+    const configured = this.isConfigured();
+    this.ui.sendButton.disabled = this.state.busy || !this.ui.prompt.value.trim() || !configured;
+    if (configured) {
+      this.ui.sendButton.removeAttribute("title");
+    } else {
+      const missing = this.missingConfigSummary();
+      this.ui.sendButton.title = missing ? `Add your ${missing} to send a prompt.` : "Configuration required to send a prompt.";
+    }
     this.ui.cancelButton.disabled = !this.state.busy || this.cancelRequested;
     this.ui.clearButton.disabled = this.state.busy;
     this.ui.copyButton.disabled = this.ui.log.childElementCount === 0;
+    this.applyIdleStatus();
   }
   invalidateAgent() {
     this.agent = null;
@@ -46845,7 +46959,7 @@ ${markdown.trim()}`;
   }
   async createProviderModel(providerId, modelId, apiKey, bedrockRegion) {
     if (providerId === "openai-responses" || providerId === "openai-chat") {
-      const { OpenAIModel } = await Promise.resolve().then(() => require("./index-BHJHkcUd.cjs"));
+      const { OpenAIModel } = await Promise.resolve().then(() => require("./index-BoF3kFnA.cjs"));
       return new OpenAIModel({
         api: providerId === "openai-responses" ? "responses" : "chat",
         modelId,
@@ -46856,7 +46970,7 @@ ${markdown.trim()}`;
       });
     }
     if (providerId === "anthropic") {
-      const { AnthropicModel } = await Promise.resolve().then(() => require("./anthropic-poATb89G.cjs"));
+      const { AnthropicModel } = await Promise.resolve().then(() => require("./anthropic-0HkAVdzd.cjs"));
       return new AnthropicModel({
         modelId,
         apiKey,
@@ -46866,7 +46980,7 @@ ${markdown.trim()}`;
       });
     }
     if (providerId === "google") {
-      const { GoogleModel } = await Promise.resolve().then(() => require("./index-D8NXbhES.cjs"));
+      const { GoogleModel } = await Promise.resolve().then(() => require("./index-D6NOZFBl.cjs"));
       return new GoogleModel({
         modelId,
         apiKey
@@ -46992,7 +47106,11 @@ ${BROWSER_MAPLIBRE_CODE_SYSTEM_PROMPT}` : BROWSER_MAPLIBRE_SYSTEM_PROMPT;
       } else {
         this.appendAssistantLog(answer);
       }
-      this.setStatus(abortController.signal.aborted ? "Cancelled" : "Ready", "connected");
+      if (abortController.signal.aborted) {
+        this.setStatus("Cancelled", "connected");
+      } else {
+        this.applyIdleStatus(true);
+      }
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       if (abortController.signal.aborted) {
@@ -47031,7 +47149,6 @@ ${BROWSER_MAPLIBRE_CODE_SYSTEM_PROMPT}` : BROWSER_MAPLIBRE_SYSTEM_PROMPT;
     const buttonRect = button.getBoundingClientRect();
     const mapRect = this.mapContainer.getBoundingClientRect();
     const position = this.getControlPosition();
-    const resizeOnLeft = position === "top-right" || position === "bottom-right";
     const buttonTop = buttonRect.top - mapRect.top;
     const buttonBottom = mapRect.bottom - buttonRect.bottom;
     const buttonLeft = buttonRect.left - mapRect.left;
@@ -47041,8 +47158,6 @@ ${BROWSER_MAPLIBRE_CODE_SYSTEM_PROMPT}` : BROWSER_MAPLIBRE_SYSTEM_PROMPT;
     this.panel.style.bottom = "";
     this.panel.style.left = "";
     this.panel.style.right = "";
-    this.panel.classList.toggle("resize-left", resizeOnLeft);
-    this.panel.classList.toggle("resize-right", !resizeOnLeft);
     switch (position) {
       case "top-left":
         this.panel.style.top = `${buttonTop + buttonRect.height + panelGap}px`;
@@ -47089,4 +47204,4 @@ exports.toJsonValue = toJsonValue;
 exports.toMimeType = toMimeType;
 exports.toUtf8 = toUtf8;
 exports.warnOnce = warnOnce;
-//# sourceMappingURL=GeoAgentControl-NjhimZRg.cjs.map
+//# sourceMappingURL=GeoAgentControl-BYfsQsUU.cjs.map