@luzmo/analytics-components-kit 1.0.8-beta.2 → 1.0.8-beta.4

package/components/dataset-selector-row/dataset-selector-row.d.ts

@@ -4,13 +4,16 @@ import '@luzmo/lucero/select';
 import '@luzmo/lucero/tags';
 import '@luzmo/lucero/tooltip';
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import type { Agent } from '../../types/agent.types';
 import type { Dataset } from '../../types/dataset.types';
 import '../dataset-icon';
 /**
  * @customElement luzmo-dataset-selector-row
- * @summary A row component for selecting and managing datasets with pills and overlay. Theme Lucero primitives (`luzmo-select`, options, popover, tags) with `--luzmo-select-*`, `--luzmo-popover-max-height`, `--luzmo-option-*`, `--luzmo-tag-*` on this host or an ancestor; optional `--luzmo-dataset-selector-row-*` overrides ACK row shell defaults (gap, typography, search max width, scoped popover height).
+ * @summary A row component for selecting and managing datasets with pills and overlay. The dropdown lists up to five saved Agents in a labelled section above the datasets, so a chat can be scoped to an agent from the same control. Theme Lucero primitives (`luzmo-select`, options, popover, tags) with `--luzmo-select-*`, `--luzmo-popover-max-height`, `--luzmo-option-*`, `--luzmo-tag-*` on this host or an ancestor; optional `--luzmo-dataset-selector-row-*` overrides ACK row shell defaults (gap, typography, search max width, scoped popover height).
  * @fires {CustomEvent<Dataset>} dataset-selected - Fired when a dataset is selected
  * @fires {CustomEvent<Dataset>} dataset-removed - Fired when a dataset is removed
+ * @fires {CustomEvent<Agent>} luzmo-agent-selected - Fired when an agent is selected
+ * @fires {CustomEvent<Agent>} luzmo-agent-removed - Fired when the selected agent is removed
  *
  * @property {boolean} disabled - When true, disables all interactions: disables the add button, removes dataset pill delete buttons, and makes tags non-interactive
  * @property {boolean} disable-dataset-modification - When true, disables dataset search and removal while leaving informational controls interactive
@@ -32,8 +35,14 @@ export declare class LuzmoDatasetSelectorRow extends LitElement {
      * Array of selected datasets
      */
     selectedDatasets: Dataset[];
-    /** Accessible label and hover tooltip text for the dataset search trigger */
-    buttonLabel: string;
+    /**
+     * The agent the chat is scoped to, or null
+     */
+    selectedAgent: Agent | null;
+    /**
+     * Accessible label and hover tooltip text for the search trigger
+     */
+    buttonLabel?: string;
     /**
      * Auth key for DataBroker authentication
      */
@@ -52,10 +61,14 @@ export declare class LuzmoDatasetSelectorRow extends LitElement {
      * @default https://app.luzmo.com
      */
     appServer: string;
+    /** When true, shows public datasets alongside the user's other datasets. */
+    includePublicDatasets: boolean;
     /**
-     * When true, restricts results to public datasets (opendata parity)
+     * Alias for includePublicDatasets.
+     * @deprecated Use includePublicDatasets instead.
      */
-    flagOpendata: boolean;
+    get flagOpendata(): boolean;
+    set flagOpendata(value: boolean);
     /**
      * When true, disables all interactions with the component
      */
@@ -69,6 +82,7 @@ export declare class LuzmoDatasetSelectorRow extends LitElement {
     /** Maximum number of selected dataset tags shown before the overflow control; unset shows all tags. */
     maxVisibleSelectedDatasets?: number;
     private _availableDatasets;
+    private _availableAgents;
     private _removalAnnouncement;
     private _selectValue;
     private _retrieving;
@@ -76,22 +90,36 @@ export declare class LuzmoDatasetSelectorRow extends LitElement {
     private _searchValue;
     private _activeSearchRequestId;
     private _searchDebounceTimer;
+    private _announcementTimer;
+    private _loadedSections;
+    private _agentsLocale;
     private get _selectedDatasetIds();
+    private get _triggerLabel();
+    private get _unloadedSections();
+    private get _hasSelection();
     private get _datasetModificationDisabled();
     private get _visibleSelectedDatasets();
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     private _configureBroker;
-    private _loadAvailableDatasets;
+    private _loadAvailableOptions;
     private _generateQuery;
+    private _generateAgentQuery;
     private _handleSearch;
     private _handleSearchOpened;
     private _handleSearchClosed;
-    private _handleDatasetSelected;
+    private _handleOptionSelected;
+    private _selectAgent;
+    private _selectDataset;
     private _handleDatasetRemoved;
+    private _handleAgentRemoved;
+    private _announceRemoval;
     private _renderDatasetTag;
+    private _renderAgentTag;
     private _getDatasetOptions;
+    private _getAgentOptions;
+    private _getOptions;
     private _renderDatasetOptionIcon;
     private _renderDatasetSearch;
     private _createDatasetRemovedHandler;

package/components/dataset-selector-row/index.cjs

@@ -17,4 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../dataset-selector-row-Cte3skmf.cjs");Object.defineProperty(exports,"LuzmoDatasetSelectorRow",{enumerable:!0,get:function(){return e.t}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../dataset-selector-row-D9cQeVQi.cjs");Object.defineProperty(exports,"LuzmoDatasetSelectorRow",{enumerable:!0,get:function(){return e.t}});

package/components/dataset-selector-row/index.d.ts

@@ -5,4 +5,5 @@ declare global {
     }
 }
 export { LuzmoDatasetSelectorRow } from './dataset-selector-row';
+export type { Agent } from '../../types/agent.types';
 export type { Dataset } from '../../types/dataset.types';

package/components/dataset-selector-row/index.js

@@ -24,5 +24,5 @@
 		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba(var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity));--luzmo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
 	}
 })();
-import { t as e } from "../dataset-selector-row-eb2fUxMB.js";
+import { t as e } from "../dataset-selector-row-BR5fZlp0.js";
 export { e as LuzmoDatasetSelectorRow };

package/components/dataset-selector-row-BR5fZlp0.js

@@ -0,0 +1,417 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { t as e } from "./decorate-DyMgX_Uh.js";
+import { t } from "./set-locale-BHxiIDi2.js";
+import { t as n } from "./data-broker-B0uUO5er.js";
+import { n as r, t as i } from "./get-dataset-name-ffz-R0AZ.js";
+import "./dataset-icon-CWT5Ju8w.js";
+import { luzmoFileUploadOutline as a, luzmoPlugin as o, luzmoPlus as s, luzmoRobot as c } from "@luzmo/icons";
+import "@luzmo/lucero/icon";
+import { LitElement as l, html as u, nothing as d, unsafeCSS as f } from "lit";
+import { property as p, state as m } from "lit/decorators.js";
+import { localized as h, msg as g, str as _ } from "@lit/localize";
+import "@luzmo/lucero/action-button";
+import "@luzmo/lucero/select";
+import "@luzmo/lucero/tags";
+import "@luzmo/lucero/tooltip";
+import { repeat as v } from "lit/directives/repeat.js";
+//#region src/components/dataset-selector-row/dataset-selector-row.module.scss?inline
+var y = ":host([disabled]){pointer-events:none}:host{box-sizing:border-box;gap:var(--luzmo-dataset-selector-row-gap,var(--dataset-selector-row-gap));min-height:var(--luzmo-dataset-selector-row-min-height,var(--dataset-selector-row-min-height));font-size:var(--luzmo-dataset-selector-row-font-size,var(--dataset-selector-row-font-size));color:var(--luzmo-dataset-selector-row-color,var(--dataset-selector-row-color));font-family:var(--luzmo-dataset-selector-row-font-family,var(--dataset-selector-row-font-family));flex-flow:wrap;align-items:flex-start;display:flex}:host .dataset-search{--luzmo-select-inline-size:fit-content;flex:none;align-self:flex-start;inline-size:auto}:host .dataset-search .dataset-search-trigger-layout{align-items:center;gap:var(--luzmo-spacing-2);--luzmo-icon-vertical-align:top;min-inline-size:0;display:flex}:host .dataset-search .dataset-search-trigger-label{white-space:nowrap;line-height:1}:host .dataset-search{max-inline-size:var(--luzmo-dataset-selector-row-search-max-width,var(--dataset-selector-row-search-max-width));--luzmo-popover-max-height:var(--luzmo-dataset-selector-row-search-popover-max-height,var(--dataset-selector-row-search-popover-max-height,var(--luzmo-popover-max-height)));--select-minimum-width-multiplier:1;--luzmo-options-section-header-color:var(--luzmo-font-color)}:host .selected-dataset-tag,:host .selected-agent-tag{--luzmo-tag-max-inline-size:var(--dataset-selector-row-tag-max-inline-size);--luzmo-tag-height:var(--luzmo-component-height);--luzmo-tag-spacing-inline-start:var(--luzmo-spacing-3);--luzmo-tag-icon-spacing-inline-end:var(--luzmo-spacing-3);--luzmo-tag-label-spacing-inline-end:var(--luzmo-spacing-2);--luzmo-tag-clear-button-spacing-inline-start:.375rem;--luzmo-tag-clear-button-spacing-inline-end:.375rem;margin:0}:host .selected-datasets-tags{--luzmo-tag-group-item-margin-block:0;--luzmo-tag-group-item-margin-inline:0;display:contents}:host .selected-dataset-tag .dataset-tag-label,:host .selected-agent-tag .dataset-tag-label{align-items:center;line-height:1}:host .sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:host{--dataset-selector-row-gap:var(--luzmo-spacing-2);--dataset-selector-row-min-height:1.75rem;--dataset-selector-row-font-size:.75rem;--dataset-selector-row-color:var(--luzmo-font-color-extra-dimmed);--dataset-selector-row-font-family:var(--luzmo-font-family);--dataset-selector-row-tag-max-inline-size:var(--luzmo-tag-max-inline-size,180px);--dataset-selector-row-search-max-width:23.75rem;--dataset-selector-row-search-popover-max-height:400px}", b = 400, x = 50, S = 5, C = "dataset:", w = "agent:", T = ["datasets", "agents"];
+function E(e, t) {
+	return t.length > 0 ? [{
+		header: !0,
+		label: e
+	}, ...t] : [];
+}
+var D = class extends l {
+	constructor(...e) {
+		super(...e), this.selectedDatasets = [], this.selectedAgent = null, this.authKey = "", this.authToken = "", this.apiUrl = "https://api.luzmo.com", this.appServer = "https://app.luzmo.com", this.includePublicDatasets = !1, this.disabled = !1, this.disableDatasetModification = !1, this.hideDatasetIcons = !1, this._availableDatasets = [], this._availableAgents = [], this._removalAnnouncement = "", this._selectValue = [], this._retrieving = !1, this._showAllSelectedDatasets = !1, this._searchValue = "", this._activeSearchRequestId = 0, this._searchDebounceTimer = null, this._announcementTimer = null, this._loadedSections = /* @__PURE__ */ new Set(), this._agentsLocale = t(), this._renderDatasetOptionIcon = (e) => {
+			if (this.hideDatasetIcons) return null;
+			let t = e.value;
+			if (typeof t != "string" || !t.startsWith(C)) return null;
+			let n = t.slice(8), r = this._availableDatasets.find((e) => e.id === n);
+			return r ? u`
+      <luzmo-dataset-icon
+        slot="icon"
+        .datasetInfo=${r}
+        size="16px"
+        app-url=${this.appServer}
+      ></luzmo-dataset-icon>
+    ` : null;
+		};
+	}
+	static {
+		this.styles = f(y);
+	}
+	static {
+		this.tagName = "luzmo-dataset-selector-row";
+	}
+	get flagOpendata() {
+		return this.includePublicDatasets;
+	}
+	set flagOpendata(e) {
+		this.includePublicDatasets = e;
+	}
+	get _selectedDatasetIds() {
+		return new Set(this.selectedDatasets.map((e) => e.id));
+	}
+	get _triggerLabel() {
+		return this.buttonLabel === void 0 ? g("Add dataset or agent", { desc: "Label for the control that opens the dropdown listing both datasets and agents" }) : this.buttonLabel;
+	}
+	get _unloadedSections() {
+		return T.filter((e) => !this._loadedSections.has(e));
+	}
+	get _hasSelection() {
+		return this.selectedDatasets.length > 0 || !!this.selectedAgent;
+	}
+	get _datasetModificationDisabled() {
+		return this.disabled || this.disableDatasetModification;
+	}
+	get _visibleSelectedDatasets() {
+		let e = this.maxVisibleSelectedDatasets;
+		return this._showAllSelectedDatasets || e === void 0 || !Number.isFinite(e) ? this.selectedDatasets : this.selectedDatasets.slice(0, Math.max(0, Math.floor(e)));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._configureBroker();
+	}
+	disconnectedCallback() {
+		this._searchDebounceTimer !== null && (clearTimeout(this._searchDebounceTimer), this._searchDebounceTimer = null), this._announcementTimer !== null && (clearTimeout(this._announcementTimer), this._announcementTimer = null), super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this._agentsLocale !== t() && (this._agentsLocale = t(), this._loadedSections.delete("agents")), (e.has("authKey") || e.has("authToken") || e.has("apiUrl")) && (this._configureBroker(), this._activeSearchRequestId++, this._loadedSections.clear(), this._availableDatasets = [], this._availableAgents = [], this._retrieving = !1);
+	}
+	_configureBroker() {
+		n.configure({
+			authKey: this.authKey,
+			authToken: this.authToken,
+			apiUrl: this.apiUrl
+		});
+	}
+	async _loadAvailableOptions(e = T) {
+		let r = ++this._activeSearchRequestId;
+		e.forEach((e) => this._loadedSections.delete(e)), e.includes("datasets") && (this._availableDatasets = []), e.includes("agents") && (this._availableAgents = []), this._retrieving = this._getOptions().length === 0;
+		let i = () => r === this._activeSearchRequestId;
+		await Promise.all([(async () => {
+			if (e.includes("datasets")) try {
+				let e = await n.fetchApi("/securable", {
+					action: "get",
+					version: "0.1.0",
+					find: this._generateQuery()
+				});
+				i() && (this._availableDatasets = e.rows ?? [], this._loadedSections.add("datasets"));
+			} catch (e) {
+				console.error("Error loading datasets:", e);
+			}
+		})(), (async () => {
+			if (!e.includes("agents")) return;
+			let r = t();
+			try {
+				let e = await n.fetchApi("/agent", {
+					action: "get",
+					version: "0.1.0",
+					find: this._generateAgentQuery()
+				});
+				i() && r === t() && (this._availableAgents = e.rows ?? [], this._loadedSections.add("agents"));
+			} catch (e) {
+				console.error("Error loading agents:", e);
+			}
+		})()]), i() && (this._retrieving = !1);
+	}
+	_generateQuery() {
+		return {
+			attributes: [
+				"id",
+				"updated_at",
+				"name",
+				"subtype"
+			],
+			include: [{
+				model: "Account",
+				attributes: [
+					"id",
+					"provider",
+					"name"
+				],
+				include: [{
+					model: "Plugin",
+					attributes: ["id"],
+					include: [{
+						model: "Thumbnail",
+						where: { size: "32px" }
+					}]
+				}]
+			}],
+			where: { type: "dataset" },
+			limit: x,
+			offset: 0,
+			...this._searchValue ? {
+				search: {
+					match_types: ["name", "description"],
+					keyphrase: this._searchValue,
+					securable_types: "dataset"
+				},
+				order: [["name", "asc"]]
+			} : { order: [["updated_at", "desc"]] },
+			...this.includePublicDatasets ? { options: { public: null } } : {}
+		};
+	}
+	_generateAgentQuery() {
+		return {
+			attributes: ["id", "name"],
+			limit: 6,
+			offset: 0,
+			order: [[
+				"name",
+				"asc",
+				{
+					case_sensitive: !1,
+					locales: [t()]
+				}
+			]],
+			...this._searchValue ? { search: {
+				match_types: ["name"],
+				keyphrase: this._searchValue
+			} } : {}
+		};
+	}
+	_handleSearch(e) {
+		if (this._datasetModificationDisabled) return;
+		let t = e.detail?.string ?? "";
+		t !== this._searchValue && (this._searchValue = t, this._loadedSections.clear(), this._activeSearchRequestId++, this._retrieving = !0, this._searchDebounceTimer !== null && clearTimeout(this._searchDebounceTimer), this._searchDebounceTimer = window.setTimeout(() => {
+			this._loadAvailableOptions();
+		}, b));
+	}
+	_handleSearchOpened() {
+		if (this._datasetModificationDisabled) return;
+		this._searchValue = "";
+		let e = this._unloadedSections;
+		e.length > 0 && this._loadAvailableOptions(e);
+	}
+	_handleSearchClosed() {
+		this._searchDebounceTimer !== null && (clearTimeout(this._searchDebounceTimer), this._searchDebounceTimer = null), this._searchValue !== "" && (this._activeSearchRequestId++, this._searchValue = "", this._availableDatasets = [], this._availableAgents = [], this._loadedSections.clear()), this._retrieving = !1;
+	}
+	_handleOptionSelected(e) {
+		if (this._datasetModificationDisabled) return;
+		let t = e.detail?.value?.[0];
+		if (this._selectValue = [], t?.startsWith(w)) {
+			this._selectAgent(t.slice(6));
+			return;
+		}
+		t?.startsWith(C) && this._selectDataset(t.slice(8));
+	}
+	_selectAgent(e) {
+		let t = this._availableAgents.find((t) => t.id === e);
+		!t || this.selectedAgent?.id === t.id || (this.selectedAgent = t, this.dispatchEvent(new CustomEvent("luzmo-agent-selected", {
+			detail: t,
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_selectDataset(e) {
+		let t = this._availableDatasets.find((t) => t.id === e);
+		if (t && !this._selectedDatasetIds.has(t.id)) {
+			let e = [...this.selectedDatasets, t], n = this.maxVisibleSelectedDatasets;
+			typeof n == "number" && Number.isFinite(n) && e.length > Math.floor(n) && (this._showAllSelectedDatasets = !0), this.selectedDatasets = e, this.dispatchEvent(new CustomEvent("dataset-selected", {
+				detail: t,
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+	}
+	_handleDatasetRemoved(e) {
+		if (this._datasetModificationDisabled) return;
+		let t = i(e), n = this.selectedDatasets.filter((t) => t.id !== e.id);
+		this.selectedDatasets = n, this._announceRemoval(t), this.dispatchEvent(new CustomEvent("dataset-removed", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleAgentRemoved(e) {
+		this._datasetModificationDisabled || (this.selectedAgent = null, this._announceRemoval(r(e)), this.dispatchEvent(new CustomEvent("luzmo-agent-removed", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_announceRemoval(e) {
+		this._announcementTimer !== null && clearTimeout(this._announcementTimer), this._removalAnnouncement = "", this._announcementTimer = window.setTimeout(() => {
+			this._removalAnnouncement = g(_`Removed ${e}`, { desc: "Screen reader announcement when a selected tag is removed; the interpolated value is the dataset or agent name" }), this._announcementTimer = window.setTimeout(() => {
+				this._removalAnnouncement = "", this._announcementTimer = null;
+			}, 1e3);
+		});
+	}
+	_renderDatasetTag(e) {
+		return u`
+      <luzmo-tag
+        class="selected-dataset-tag"
+        ?deletable=${!this._datasetModificationDisabled}
+        tabindex=${this._datasetModificationDisabled ? -1 : 0}
+        aria-label=${this._datasetModificationDisabled ? i(e) : g(_`Remove ${i(e)}`, { desc: "Accessible label for the delete control on a selected tag; the interpolated value is the dataset or agent name" })}
+        @delete=${this._createDatasetRemovedHandler(e)}
+      >
+        ${this.hideDatasetIcons ? d : u`
+                <luzmo-dataset-icon
+                  slot="icon"
+                  .datasetInfo=${e}
+                  size="16px"
+                  app-url=${this.appServer}
+                ></luzmo-dataset-icon>
+              `}
+        <span class="dataset-tag-label">${i(e)}</span>
+      </luzmo-tag>
+    `;
+	}
+	_renderAgentTag(e) {
+		let t = r(e);
+		return u`
+      <luzmo-tag
+        class="selected-agent-tag"
+        ?deletable=${!this._datasetModificationDisabled}
+        tabindex=${this._datasetModificationDisabled ? -1 : 0}
+        aria-label=${this._datasetModificationDisabled ? t : g(_`Remove ${t}`, { desc: "Accessible label for the delete control on a selected tag; the interpolated value is the dataset or agent name" })}
+        @delete=${() => this._handleAgentRemoved(e)}
+      >
+        <luzmo-icon slot="icon" .icon=${c} size="s" aria-hidden="true"></luzmo-icon>
+        <span class="dataset-tag-label">${t}</span>
+      </luzmo-tag>
+    `;
+	}
+	_getDatasetOptions() {
+		return this._availableDatasets.filter((e) => !this._selectedDatasetIds.has(e.id)).map((e) => ({
+			value: `${C}${e.id}`,
+			label: i(e),
+			...this.hideDatasetIcons ? {} : { icon: e.subtype === "upload" ? a : o }
+		}));
+	}
+	_getAgentOptions() {
+		return this._availableAgents.filter((e) => e.id !== this.selectedAgent?.id).slice(0, S).map((e) => ({
+			value: `${w}${e.id}`,
+			label: r(e),
+			icon: c
+		}));
+	}
+	_getOptions() {
+		return [...E(g("Agents", { desc: "Section header above the agents in the add dropdown" }), this._getAgentOptions()), ...E(g("Datasets", { desc: "Section header above the datasets in the add dropdown" }), this._getDatasetOptions())];
+	}
+	_renderDatasetSearch() {
+		return u`
+      <luzmo-select
+        class="dataset-search"
+        search="on"
+        selects="single"
+        variant="highlight"
+        placement="bottom-start"
+        hide-dropdown-icon
+        no-wrap
+        .label=${this._triggerLabel}
+        .options=${this._getOptions()}
+        .value=${this._selectValue}
+        .retrieving=${this._retrieving}
+        .optionIconRenderer=${this._renderDatasetOptionIcon}
+        ?disabled=${this._datasetModificationDisabled}
+        @change=${this._handleOptionSelected}
+        @luzmo-search=${this._handleSearch}
+        @luzmo-opened=${this._handleSearchOpened}
+        @luzmo-closed=${this._handleSearchClosed}
+      >
+        <span slot="label" class="dataset-search-trigger-layout">
+          <luzmo-icon .icon=${s} size="s" aria-hidden="true"></luzmo-icon>
+          ${this._hasSelection ? d : u`<span class="dataset-search-trigger-label">${this._triggerLabel}</span>`}
+        </span>
+        ${this._hasSelection ? u`<luzmo-tooltip slot="tooltip" self-managed placement="top" size="s">${this._triggerLabel}</luzmo-tooltip>` : d}
+      </luzmo-select>
+    `;
+	}
+	_createDatasetRemovedHandler(e) {
+		return () => this._handleDatasetRemoved(e);
+	}
+	async _handleShowAllDatasets() {
+		if (this.disabled) return;
+		let e = this._visibleSelectedDatasets.length;
+		this._showAllSelectedDatasets = !0, await this.updateComplete, this.shadowRoot?.querySelectorAll(".selected-dataset-tag")[e]?.focus();
+	}
+	render() {
+		let e = this._visibleSelectedDatasets, t = this.selectedDatasets.length - e.length, n = t === 1 ? g("Show 1 more selected dataset", { desc: "Accessible label for the button that reveals one selected dataset tag hidden by the visible tag limit" }) : g(_`Show ${t} more selected datasets`, { desc: "Accessible label for the button that reveals selected dataset tags hidden by the visible tag limit" });
+		return u`
+      ${this._renderDatasetSearch()}
+      ${this._hasSelection ? u`
+            <luzmo-tags class="selected-datasets-tags">
+              ${this.selectedAgent ? this._renderAgentTag(this.selectedAgent) : d}
+              ${v(e, (e) => e.id, (e) => this._renderDatasetTag(e))}
+            </luzmo-tags>
+            ${t > 0 ? u`
+                    <luzmo-action-button
+                      class="show-more-datasets"
+                      quiet
+                      aria-label=${n}
+                      ?disabled=${this.disabled}
+                      @click=${this._handleShowAllDatasets}
+                    >
+                      ${g(_`+ ${t} more`, { desc: "Button that reveals selected dataset tags hidden by the visible tag limit" })}
+                    </luzmo-action-button>
+                  ` : d}
+          ` : d}
+      <span class="sr-only" role="status" aria-live="polite">${this._removalAnnouncement}</span>
+    `;
+	}
+};
+//#endregion
+//#region src/components/dataset-selector-row/index.ts
+e([p({ type: Array })], D.prototype, "selectedDatasets", void 0), e([p({ attribute: !1 })], D.prototype, "selectedAgent", void 0), e([p({
+	type: String,
+	attribute: "button-label"
+})], D.prototype, "buttonLabel", void 0), e([p({
+	type: String,
+	attribute: "auth-key"
+})], D.prototype, "authKey", void 0), e([p({
+	type: String,
+	attribute: "auth-token"
+})], D.prototype, "authToken", void 0), e([p({
+	type: String,
+	attribute: "api-url"
+})], D.prototype, "apiUrl", void 0), e([p({
+	type: String,
+	attribute: "app-server"
+})], D.prototype, "appServer", void 0), e([p({
+	type: Boolean,
+	reflect: !0,
+	attribute: "include-public-datasets"
+})], D.prototype, "includePublicDatasets", void 0), e([p({
+	type: Boolean,
+	attribute: "flag-opendata"
+})], D.prototype, "flagOpendata", null), e([p({
+	type: Boolean,
+	reflect: !0,
+	attribute: "disabled"
+})], D.prototype, "disabled", void 0), e([p({
+	type: Boolean,
+	reflect: !0,
+	attribute: "disable-dataset-modification"
+})], D.prototype, "disableDatasetModification", void 0), e([p({
+	type: Boolean,
+	attribute: "hide-dataset-icons"
+})], D.prototype, "hideDatasetIcons", void 0), e([p({
+	type: Number,
+	reflect: !0,
+	attribute: "max-visible-selected-datasets"
+})], D.prototype, "maxVisibleSelectedDatasets", void 0), e([m()], D.prototype, "_availableDatasets", void 0), e([m()], D.prototype, "_availableAgents", void 0), e([m()], D.prototype, "_removalAnnouncement", void 0), e([m()], D.prototype, "_selectValue", void 0), e([m()], D.prototype, "_retrieving", void 0), e([m()], D.prototype, "_showAllSelectedDatasets", void 0), D = e([h()], D), customElements.get("luzmo-dataset-selector-row") || customElements.define("luzmo-dataset-selector-row", D);
+//#endregion
+export { D as t };