maplibre-gl-geoagent 0.4.1 → 0.4.3

package/README.md

@@ -131,6 +131,7 @@ Converse model ID, and set the AWS region. The default Bedrock model is
 | `defaultProvider`              | `GeoAgentProviderId`                                           | `'openai-responses'`  |
 | `defaultModel`                 | `string \| Partial<Record<GeoAgentProviderId, string>>`        | provider default      |
 | `storagePrefix`                | `string`                                                       | `'geoagent.maplibre'` |
+| `apiKeys`                      | `Partial<Record<GeoAgentProviderId, string>>`                  | `undefined`           |
 | `allowCodeExecutionDefault`    | `boolean`                                                      | `true`                |
 | `allowDestructiveToolsDefault` | `boolean`                                                      | `true`                |
 | `showPermissionToggles`        | `boolean`                                                      | `false`               |
@@ -183,6 +184,24 @@ are sent directly from the page to the selected model provider. Use this for
 local development, trusted internal apps, or apps that intentionally expose a
 browser-compatible credential path.
 
+Host applications can prefill the panel with initial API keys:
+
+```typescript
+new GeoAgentControl({
+  apiKeys: {
+    "openai-responses": "OPENAI_API_KEY_VALUE",
+    "openai-chat": "OPENAI_API_KEY_VALUE",
+    anthropic: "ANTHROPIC_API_KEY_VALUE",
+    google: "GOOGLE_API_KEY_VALUE",
+    bedrock: "AWS_BEARER_TOKEN_BEDROCK_VALUE",
+  },
+});
+```
+
+Saved `sessionStorage` values take precedence over `apiKeys`. Initial keys are
+kept in browser memory and are not written to storage unless the user edits the
+API key field.
+
 For Amazon Bedrock, this browser-only control uses Bedrock API-key bearer-token
 authentication. Do not enter AWS access key IDs, secret access keys, or session
 tokens in this UI. For production Bedrock deployments, prefer a backend proxy

package/dist/{GeoAgentControl-CfSj1n01.js → GeoAgentControl-D02UP5lT.js}

@@ -3518,7 +3518,7 @@ class HttpProtocol extends SerdeContext {
     });
   }
   async loadEventStreamCapability() {
-    const { EventStreamSerde } = await import("./index-CVvcPs8z.js");
+    const { EventStreamSerde } = await import("./index-ITGaM0CV.js");
     return new EventStreamSerde({
       marshaller: this.getEventStreamMarshaller(),
       serializer: this.serializer,
@@ -42664,7 +42664,7 @@ class EarthEngineService {
   }
   async loadEe() {
     if (!this.eePromise) {
-      this.eePromise = import("./browser-D437ICBx.js").then((n) => n.b).then((module) => {
+      this.eePromise = import("./browser-DT7siLDs.js").then((n) => n.b).then((module) => {
         const imported = "default" in module ? module.default : module;
         const ee = imported;
         const scope2 = globalThis;
@@ -46024,7 +46024,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);
@@ -46036,6 +46035,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,
@@ -46043,6 +46045,7 @@ class GeoAgentControl {
       allowDestructiveToolsDefault: options.allowDestructiveToolsDefault ?? true,
       showPermissionToggles: options.showPermissionToggles ?? false,
       defaultModel: options.defaultModel,
+      apiKeys: options.apiKeys,
       basemaps: options.basemaps,
       earthEngine: options.earthEngine
     };
@@ -46050,6 +46053,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),
@@ -46097,10 +46101,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();
@@ -46140,6 +46140,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");
@@ -46265,6 +46270,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");
@@ -46278,11 +46286,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());
@@ -46348,13 +46357,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"),
@@ -46377,7 +46382,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;
@@ -46574,13 +46580,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();
@@ -46653,23 +46652,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);
@@ -46700,7 +46743,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;
@@ -46711,16 +46753,18 @@ class GeoAgentControl {
     return this.providerConfig(this.currentProviderId());
   }
   loadProviderSettings() {
+    var _a3, _b3;
     if (!this.ui) {
       return;
     }
     const provider = this.currentProviderConfig();
+    const initialApiKey = ((_b3 = (_a3 = this.options.apiKeys) == null ? void 0 : _a3[provider.id]) == null ? void 0 : _b3.trim()) ?? "";
     this.state.providerId = provider.id;
     this.state.modelId = storageGet(this.modelStorageKey(provider.id)) || provider.defaultModel;
     this.ui.providerSelect.value = provider.id;
     this.ui.apiKeyLabel.textContent = provider.keyLabel;
     this.ui.apiKeyInput.placeholder = provider.keyPlaceholder;
-    this.ui.apiKeyInput.value = storageGet(provider.storageKey) || "";
+    this.ui.apiKeyInput.value = storageGet(provider.storageKey) || initialApiKey;
     this.ui.modelIdInput.value = this.state.modelId;
     this.ui.modelIdInput.placeholder = provider.defaultModel;
     this.state.bedrockRegion = this.initialBedrockRegion();
@@ -46841,7 +46885,7 @@ ${markdown.trim()}`;
   }
   async createProviderModel(providerId, modelId, apiKey, bedrockRegion) {
     if (providerId === "openai-responses" || providerId === "openai-chat") {
-      const { OpenAIModel } = await import("./index-CeL5qxhv.js");
+      const { OpenAIModel } = await import("./index-_-KavWih.js");
       return new OpenAIModel({
         api: providerId === "openai-responses" ? "responses" : "chat",
         modelId,
@@ -46852,7 +46896,7 @@ ${markdown.trim()}`;
       });
     }
     if (providerId === "anthropic") {
-      const { AnthropicModel } = await import("./anthropic-BVBhgJNP.js");
+      const { AnthropicModel } = await import("./anthropic-CqhQTvtC.js");
       return new AnthropicModel({
         modelId,
         apiKey,
@@ -46862,7 +46906,7 @@ ${markdown.trim()}`;
       });
     }
     if (providerId === "google") {
-      const { GoogleModel } = await import("./index-D0hzZEUn.js");
+      const { GoogleModel } = await import("./index-CvWJMktS.js");
       return new GoogleModel({
         modelId,
         apiKey
@@ -47027,7 +47071,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;
@@ -47037,8 +47080,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`;
@@ -47087,4 +47128,4 @@ export {
   toJsonValue as t,
   warnOnce as w
 };
-//# sourceMappingURL=GeoAgentControl-CfSj1n01.js.map
+//# sourceMappingURL=GeoAgentControl-D02UP5lT.js.map