@esri/hub-web-components 0.2.1 → 0.3.0

package/dist/chunks/processLayout.js

@@ -1,16 +1,16 @@
-import * as h from "@esri/hub-components";
-import { cloneObject as y, deepFindById as p, fetchHubEntity as v, interpolate as m } from "@esri/hub-common";
-import { Resolver as w } from "@stoplight/json-ref-resolver";
-import { getItemData as b } from "@esri/arcgis-rest-portal";
+import { getGlobalContext as m } from "@esri/hub-components";
+import { cloneObject as y, deepFindById as f, fetchHubEntity as v, interpolate as w } from "@esri/hub-common";
+import { Resolver as b } from "@stoplight/json-ref-resolver";
+import { getItemData as g } from "@esri/arcgis-rest-portal";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
-const A = h.getGlobalContext;
-function f(s) {
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
+const N = m;
+function p(s) {
   const r = Object.getOwnPropertyNames(s);
   for (const o of r) {
     const t = s[o];
-    t && typeof t == "object" && !Array.isArray(t) && f(t);
+    t && typeof t == "object" && !Array.isArray(t) && p(t);
   }
   return Object.freeze(s);
 }
@@ -21,7 +21,7 @@ async function O(s, r, o) {
     entity: r.entity ?? {},
     site: r.site ?? {},
     variables: r.variables ?? {}
-  }, n = await new w({
+  }, a = await new b({
     resolvers: {
       // entity://:type/:id
       // fetch an entity and make it available for interpolation in the layout
@@ -29,14 +29,14 @@ async function O(s, r, o) {
       // connected to the project, allowing for dynamic content rendering.
       entity: {
         async resolve(e) {
-          const a = e.href().split("/")[2], c = e.href().split("/")[3];
-          let l;
+          const n = e.href().split("/")[2], c = e.href().split("/")[3];
+          let i;
           try {
-            l = await v(a, c, o);
+            i = await v(n, c, o);
           } catch {
             throw new Error(`processLayout entity resolver: could not fetch entity ${e.href()}`);
           }
-          return l;
+          return i;
         }
       },
       // layout://:type/:id/:nodeId
@@ -45,31 +45,31 @@ async function O(s, r, o) {
       // TODO: Should this support loading a node from a named version?
       layout: {
         async resolve(e) {
-          const a = e.href().split("/")[3], c = e.href().split("/")[4] || "";
-          let l;
+          const n = e.href().split("/")[3], c = e.href().split("/")[4] || "";
+          let i;
           try {
-            l = await b(a, o.requestOptions);
+            i = await g(n, o.requestOptions);
           } catch {
             throw new Error(`processLayout layout resolver: Could not fetch layout ${e.href()}`);
           }
-          let i = l.layout;
-          return c && (i = p(i, c)), i && (i.readOnly = !0), i;
+          let l = i.layout;
+          return c && (l = f(l, c)), l && (l.readOnly = !0), l;
         }
       }
     }
   }).resolve(t);
-  if (n.result.overrides) {
-    n.result = y(n.result);
-    const e = n.result.overrides;
-    e && Object.keys(e).forEach((a) => {
-      const c = p(n.result, a);
-      Object.assign(c, e[a]);
+  if (a.result.overrides) {
+    a.result = y(a.result);
+    const e = a.result.overrides;
+    e && Object.keys(e).forEach((n) => {
+      const c = f(a.result, n);
+      Object.assign(c, e[n]);
     });
   }
-  const d = m(n.result, u);
-  return await Promise.resolve(f(d));
+  const d = w(a.result, u);
+  return await Promise.resolve(p(d));
 }
-function g(s) {
+function L(s) {
   const r = /* @__PURE__ */ new Map();
   return async (...o) => {
     const t = JSON.stringify(o);
@@ -79,8 +79,8 @@ function g(s) {
     return r.set(t, u), await u;
   };
 }
-const N = g(O);
+const $ = L(O);
 export {
-  A as g,
-  N as p
+  N as g,
+  $ as p
 };

package/dist/chunks/runtime.js

@@ -2,9 +2,9 @@ import { css as e } from "@lit/reactive-element/css-tag.js";
 import { makeRuntime as s } from "@arcgis/lumina";
 import { trackAccess as r, createObservable as a, createTrackingTarget as c, runTracked as o } from "@arcgis/core/applications/Components/reactiveUtils.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
-const m = e``, t = s({ defaultAssetPath: "https://js.arcgis.com/0.2/hub-web-components/", hydratedAttribute: "hydrated", commonStyles: m }), { customElement: u, getAssetPath: d, setAssetPath: p } = t;
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
+const m = e``, t = s({ defaultAssetPath: "https://js.arcgis.com/0.3/hub-web-components/", hydratedAttribute: "hydrated", commonStyles: m }), { customElement: u, getAssetPath: d, setAssetPath: p } = t;
 t.t = r;
 t.o = a;
 t.c = c;

package/dist/chunks/typeGuards.js

@@ -1,6 +1,6 @@
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
 function a(t) {
   return t.tag === "arcgis-layout-section";
 }

package/dist/chunks/useT9n.js

@@ -1,8 +1,8 @@
 import { makeT9nController as o } from "@arcgis/lumina/controllers";
 import { g as t } from "./runtime.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
 const s = o(t);
 export {
   s as u

package/dist/components/arcgis-chat-shell/customElement.d.ts

@@ -13,16 +13,7 @@ export declare class ChatShell extends LitElement {
     map: LuminaArcgisMap | undefined;
     featureTable: ArcgisFeatureTable | undefined;
     chatComponent: unknown;
-    /**
-     * @default
-     * `
-     *     <div style="padding: 20px">
-     *       <h2>Disclaimer</h2>
-     *       <p>more info soon ...</p>
-     *     </div>
-     *   `
-     */
-    aboutContent: string;
+    aboutContent?: string;
     readonly arcgisUpdateMapVisibility: TargetedEvent<this, boolean>;
     /**
      * Event emitted when telemetry data is sent from the chat UI.

package/dist/components/arcgis-chat-shell/customElement.js

@@ -1,21 +1,25 @@
-import { c as n } from "../../chunks/runtime.js";
-import { html as i } from "lit-html";
-import { LitElement as s, createEvent as l, safeClassMap as c } from "@arcgis/lumina";
+import { c as o } from "../../chunks/runtime.js";
+import { html as t } from "lit-html";
+import { LitElement as n, createEvent as s, safeClassMap as c } from "@arcgis/lumina";
 import { css as h } from "@lit/reactive-element/css-tag.js";
-import { createRef as e, ref as a } from "lit/directives/ref.js";
-import { dictionary as o } from "@esri/telemetry-dictionary-hub";
+import { createRef as i, ref as a } from "lit/directives/ref.js";
+import { dictionary as l } from "@esri/telemetry-dictionary-hub";
+import { u as r } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
 const p = h`:host{display:flex;height:100%;.innerContent{word-wrap:break-word;height:100%}.hidden{display:none}.aboutPanel{padding:10px}.map-panel-outer{height:100%;display:flex;flex-direction:column}::slotted([slot="map"]){flex-grow:1}}`;
-class r extends s {
+class b extends n {
   constructor() {
-    super(...arguments), this._chatAction = e(), this._aboutAction = e(), this._contentPanel = e(), this._aboutPanel = e(), this.activePanelMode = "chat", this.mapEnabled = !1, this.mapVisible = !1, this.aboutVisible = !1, this.map = void 0, this.featureTable = void 0, this.chatComponent = void 0, this.aboutContent = `
-    <div style="padding: 20px">
-      <h2>Disclaimer</h2>
-      <p>more info soon ...</p>
-    </div>
-  `, this.arcgisUpdateMapVisibility = l(), this.hubTelemetry = l();
+    super(...arguments), this._messages = r({ blocking: !0 }), this._chatAction = i(), this._aboutAction = i(), this._contentPanel = i(), this._aboutPanel = i(), this._toggleMap = () => {
+      this.mapVisible = !this.mapVisible, this.arcgisUpdateMapVisibility.emit(this.mapVisible);
+      const e = this.mapVisible ? l.category.interaction.action.open.label.panel.details.search : l.category.interaction.action.close.label.panel.details.search;
+      this.hubTelemetry.emit({ ...e, details: "Map" });
+    }, this._handleChatClick = () => {
+      this._toggleChatAndAbout("chat");
+    }, this._handleAboutClick = () => {
+      this._toggleChatAndAbout("about");
+    }, this.activePanelMode = "chat", this.mapEnabled = !1, this.mapVisible = !1, this.aboutVisible = !1, this.map = void 0, this.featureTable = void 0, this.chatComponent = void 0, this.aboutContent = void 0, this.arcgisUpdateMapVisibility = s(), this.hubTelemetry = s();
   }
   static {
     this.properties = { activePanelMode: 16, mapEnabled: 5, mapVisible: 5, aboutVisible: 5, map: 0, featureTable: 0, chatComponent: 0, aboutContent: 1 };
@@ -23,25 +27,17 @@ class r extends s {
   static {
     this.styles = p;
   }
-  _toggleMap() {
-    this.mapVisible = !this.mapVisible, this.arcgisUpdateMapVisibility.emit(this.mapVisible);
-    const t = this.mapVisible ? o.category.interaction.action.open.label.panel.details.search : o.category.interaction.action.close.label.panel.details.search;
-    this.hubTelemetry.emit({ ...t, details: "Map" });
+  _toggleChatAndAbout(e) {
+    this._chatAction.value && this._aboutAction.value && this._contentPanel.value && this._aboutPanel.value && this.activePanelMode !== e && (this.activePanelMode = e, this._chatAction.value.toggleAttribute("active"), this._aboutAction.value.toggleAttribute("active"), this._contentPanel.value.classList.toggle("hidden"), this._aboutPanel.value.classList.toggle("hidden"));
   }
-  _handleChatClick() {
-    this._toggleChatAndAbout("chat");
-  }
-  _handleAboutClick() {
-    this._toggleChatAndAbout("about");
-  }
-  _toggleChatAndAbout(t) {
-    this._chatAction.value && this._aboutAction.value && this._contentPanel.value && this._aboutPanel.value && this.activePanelMode !== t && (this.activePanelMode = t, this._chatAction.value.toggleAttribute("active"), this._aboutAction.value.toggleAttribute("active"), this._contentPanel.value.classList.toggle("hidden"), this._aboutPanel.value.classList.toggle("hidden"));
+  renderDefaultAboutContent() {
+    return t`<div style="padding: 20px"><h2>${this._messages.aboutHeader}</h2><p>${this._messages.aboutDescription}</p></div>`;
   }
   render() {
-    return i`<calcite-action-bar><calcite-action text=Chat icon=speech-bubble active @click=${() => this._handleChatClick()} ${a(this._chatAction)}></calcite-action>${this.mapEnabled && i`<calcite-action icon=map-pin text=Map .active=${this.mapVisible} @click=${() => this._toggleMap()}></calcite-action>` || ""}<calcite-action icon=information text=About @click=${() => this._handleAboutClick()} ${a(this._aboutAction)}></calcite-action><calcite-tooltip slot=expand-tooltip>Toggle Action Bar</calcite-tooltip></calcite-action-bar><calcite-panel ${a(this._contentPanel)}><slot name=leftPanel class="innerContent"></slot></calcite-panel><calcite-panel class="hidden" ${a(this._aboutPanel)}><div class="innerContent aboutPanel" .innerHTML=${this.aboutContent ?? ""}></div></calcite-panel><calcite-panel class=${c(this.mapVisible ? "" : "hidden")}><div class="map-panel-outer"><slot name=map></slot><slot name=featureTable></slot></div></calcite-panel>`;
+    return t`<calcite-action-bar><calcite-action .text=${this._messages.chatAction} icon=speech-bubble active @click=${this._handleChatClick} ${a(this._chatAction)}></calcite-action>${this.mapEnabled && t`<calcite-action icon=map-pin .text=${this._messages.mapAction} .active=${this.mapVisible} @click=${this._toggleMap}></calcite-action>` || ""}<calcite-action icon=information .text=${this._messages.aboutAction} @click=${this._handleAboutClick} ${a(this._aboutAction)}></calcite-action><calcite-tooltip slot=expand-tooltip>${this._messages.actionsTooltip}</calcite-tooltip></calcite-action-bar><calcite-panel ${a(this._contentPanel)}><slot name=leftPanel class="innerContent"></slot></calcite-panel><calcite-panel class="hidden" ${a(this._aboutPanel)}>${this.aboutContent ? t`<div class="innerContent aboutPanel" .innerHTML=${this.aboutContent ?? ""}></div>` : t`<div class="innerContent aboutPanel">${this.renderDefaultAboutContent()}</div>`}</calcite-panel><calcite-panel class=${c(this.mapVisible ? "" : "hidden")}><div class="map-panel-outer"><slot name=map></slot><slot name=featureTable></slot></div></calcite-panel>`;
   }
 }
-n("arcgis-chat-shell", r);
+o("arcgis-chat-shell", b);
 export {
-  r as ChatShell
+  b as ChatShell
 };

package/dist/components/arcgis-chat-ui/customElement.d.ts

@@ -55,15 +55,15 @@ export declare class ArcgisChatUI extends LitElement {
      * @method decorator can be removed.
      * @param text The user's input message.
      */
-    submitUserMessage(text: string, type: "query" | "suggest"): void;
+    submitUserMessage(text: string, type: "query" | "suggest"): Promise<void>;
+    /** Event emitted when the user clicks to add data from a chat message. */
+    readonly arcgisAddDataClick: TargetedEvent<this, AddDataAction>;
+    /** Event emitted when the user clicks a zoom to location button in a chat message. */
+    readonly arcgisLocationClick: TargetedEvent<this, FinderLocation>;
     /**
      * Event emitted when telemetry data is sent from the chat UI.
      *
      * @event hubTelemetry
      */
     readonly hubTelemetry: TargetedEvent<this, Record<string, unknown>>;
-    /** Event emitted when the user clicks to add data from a chat message. */
-    readonly arcgisAddDataClick: TargetedEvent<this, AddDataAction>;
-    /** Event emitted when the user clicks a zoom to location button in a chat message. */
-    readonly arcgisLocationClick: TargetedEvent<this, FinderLocation>;
 }

package/dist/components/arcgis-chat-ui/customElement.js

@@ -1,18 +1,20 @@
-import { c as b } from "../../chunks/runtime.js";
-import { html as o } from "lit-html";
-import { ref as v } from "lit-html/directives/ref.js";
-import { LitElement as w, createEvent as d, nothing as I } from "@arcgis/lumina";
-import { css as T } from "@lit/reactive-element/css-tag.js";
-import { ChatResponse as n } from "./functional/chat-response/customElement.js";
-import { ChatStatus as k } from "./functional/chat-status/customElement.js";
-import { getItem as C } from "@esri/arcgis-rest-portal";
-import { constants as u, dictionary as p } from "@esri/telemetry-dictionary-hub";
+import { c as v } from "../../chunks/runtime.js";
+import { html as l } from "lit-html";
+import { keyed as u } from "lit-html/directives/keyed.js";
+import { ref as w } from "lit-html/directives/ref.js";
+import { LitElement as I, createEvent as g, nothing as p } from "@arcgis/lumina";
+import { css as k } from "@lit/reactive-element/css-tag.js";
+import { ChatResponse as C } from "./functional/chat-response/customElement.js";
+import { ChatStatus as T } from "./functional/chat-status/customElement.js";
+import { getItem as L } from "@esri/arcgis-rest-portal";
+import { dictionary as o, constants as f } from "@esri/telemetry-dictionary-hub";
+import { u as M } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
-const M = T`.actions{margin:.5em;background-color:#ffffff80;width:100%;border-radius:10px;.thumbnail{background-size:cover;background-position:center center;height:150px;width:100%;display:flex;align-items:center;justify-content:center;border-top-left-radius:10px;border-top-right-radius:10px}.viewDetails{font-size:smaller}.bottom{padding:10px}.title{margin-bottom:5px}.viewDetails span{transform:rotate(90deg);display:inline-block}calcite-accordion{width:100%}}.sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1em;width:100%}.source{margin:.5em;border-radius:10px;width:200px}calcite-accordion-item[heading=Map]>*{margin-bottom:1rem}arcgis-map{display:block;height:400px}.text{margin:0 .5rem}.message{display:grid;grid-column-gap:1px;justify-content:start;grid-template-areas:"avatar text" ". feedback "}.message.removed{display:none}.response{display:block;grid-area:text;width:fit-content;padding:.75rem;font-size:1rem;line-height:1.375rem;text-align:left}.response p{margin-block-start:0;margin-block-end:0}.response a{color:#00a0ff}.response .actions{width:100%;display:flex;flex-wrap:wrap;box-sizing:border-box}.author-Human{justify-content:end;grid-template-areas:"text avatar" "feedback ."}.author-Human .response{background-color:var(--color-primary);color:#fff;border-radius:15px 0 15px 15px}.author-AI .response{border-radius:0 15px 15px;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1)}.status-message{opacity:0;font-size:1em;transition:opacity 2s ease-in-out;font-size:1.2rem;text-justify:auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}50%{opacity:1;transform:translateY(0)}to{opacity:0}}.status-message{animation:fadeIn 6s infinite}.loader{display:flex;flex-direction:column;gap:.5rem;background:#fff;padding:1rem;width:65%;border-radius:0 16px 16px}.skeleton-loader{background:#eee;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);border-radius:5px;background-size:200% 100%;animation:1.5s shine linear infinite;height:24px;width:100%}.square-container{display:flex;gap:1rem;flex-direction:row}.square{width:120px;height:120px}@keyframes shine{to{background-position-x:-200%}}:host{--color-primary: dodgerblue;display:flex;flex-direction:column;height:100%;.messages{flex:1;flex-grow:1;display:flex;padding:10px;overflow-y:auto;flex-direction:column;gap:1rem}form{margin:0 .5rem;.action-buttons{display:flex;justify-content:space-around}.action-buttons calcite-button{width:auto;flex-grow:1;margin:.5rem}}}#request-input{margin:0 .5rem;height:2rem}.actionsTitle{display:block;font-weight:700;font-size:1.2rem;text-align:left}#actions{display:flex;flex-flow:row wrap;justify-content:flex-start;gap:1rem;margin:1rem}`;
-var a = /* @__PURE__ */ ((s) => (s.USER = "Human", s.HUB = "AI", s.SYSTEM = "System", s))(a || {});
-const f = [
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
+const S = k`.actions{margin:.5em;background-color:#ffffff80;width:100%;border-radius:10px;.thumbnail{background-size:cover;background-position:center center;height:150px;width:100%;display:flex;align-items:center;justify-content:center;border-top-left-radius:10px;border-top-right-radius:10px}.viewDetails{font-size:smaller}.bottom{padding:10px}.title{margin-bottom:5px}.viewDetails span{transform:rotate(90deg);display:inline-block}calcite-accordion{width:100%}}.sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1em;width:100%}.source{margin:.5em;border-radius:10px;width:200px}calcite-accordion-item[heading=Map]>*{margin-bottom:1rem}arcgis-map{display:block;height:400px}.text{margin:0 .5rem}.message{display:grid;grid-column-gap:1px;justify-content:start;grid-template-areas:"avatar text" ". feedback "}.message.removed{display:none}.response{display:block;grid-area:text;width:fit-content;padding:.75rem;font-size:1rem;line-height:1.375rem;text-align:left}.response p{margin-block-start:0;margin-block-end:0}.response a{color:#00a0ff}.response .actions{width:100%;display:flex;flex-wrap:wrap;box-sizing:border-box}.author-Human{justify-content:end;grid-template-areas:"text avatar" "feedback ."}.author-Human .response{background-color:var(--color-primary);color:#fff;border-radius:15px 0 15px 15px}.author-AI .response{border-radius:0 15px 15px;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1)}.status-message{opacity:0;font-size:1em;transition:opacity 2s ease-in-out;font-size:1.2rem;text-justify:auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}50%{opacity:1;transform:translateY(0)}to{opacity:0}}.status-message{animation:fadeIn 6s infinite}.loader{display:flex;flex-direction:column;gap:.5rem;background:#fff;padding:1rem;width:65%;border-radius:0 16px 16px}.skeleton-loader{background:#eee;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);border-radius:5px;background-size:200% 100%;animation:1.5s shine linear infinite;height:24px;width:100%}.square-container{display:flex;gap:1rem;flex-direction:row}.square{width:120px;height:120px}@keyframes shine{to{background-position-x:-200%}}:host{--color-primary: dodgerblue;display:flex;flex-direction:column;height:100%;.messages{flex:1;flex-grow:1;display:flex;padding:10px;overflow-y:auto;flex-direction:column;gap:1rem}form{margin:0 .5rem;.action-buttons{display:flex;justify-content:space-around}.action-buttons calcite-button{width:auto;flex-grow:1;margin:.5rem}}}#request-input{margin:0 .5rem;height:2rem}.actionsTitle{display:block;font-weight:700;font-size:1.2rem;text-align:left}#actions{display:flex;flex-flow:row wrap;justify-content:flex-start;gap:1rem;margin:1rem}`;
+var r = /* @__PURE__ */ ((i) => (i.USER = "Human", i.HUB = "AI", i.SYSTEM = "System", i))(r || {});
+const b = [
   "Searching for relevant datasets...",
   "Analyzing your query...",
   "Finding location details...",
@@ -20,48 +22,77 @@ const f = [
   "Filtering data...",
   "Creating map...",
   "Fetching the latest statistics..."
-], L = async (s, t) => await Promise.all(s.map(async (e) => await U(e, t))), U = async (s, t) => {
-  const e = structuredClone(s);
+], D = async (i, e) => await Promise.all(i.map(async (t) => await U(t, e))), U = async (i, e) => {
+  const t = structuredClone(i);
   try {
-    const i = await C(s.id, { authentication: t });
-    return console.debug("Enriching source:", s.id, i), e.thumbnail = i.thumbnail, e.url = i.url, e.type = i.type, e;
+    const s = await L(i.id, { authentication: e });
+    return console.debug("Enriching source:", i.id, s), t.thumbnail = s.thumbnail, t.url = s.url, t.type = s.type, t;
   } catch {
-    console.error("Could not enrich:", s);
+    console.error("Could not enrich:", i);
   }
-  return e;
+  return t;
 };
-function S(s) {
-  return !!s && typeof s == "object" && "kind" in s && s.kind === "FinderResponse";
+function $(i) {
+  return !!i && typeof i == "object" && "kind" in i && i.kind === "FinderResponse";
 }
-class $ extends w {
+class F extends I {
   constructor() {
-    super(...arguments), this.loadingMessageIntervalMs = 6e3, this.handleFormSubmit = (t) => {
-      t.preventDefault(), this.inputText.trim() && this.submitUserMessage(this.inputText, "query");
+    super(), this._messages = M({ blocking: !0 }), this.loadingMessageIntervalMs = 6e3, this.handleFormSubmit = async (e) => {
+      e.preventDefault(), this.inputText.trim() && await this.submitUserMessage(this.inputText, "query");
     }, this.handleClearHistory = () => {
       this.messages = [], this.conversationId = null, this.scrollToBottomAfterUpdate();
-    }, this.isLoading = !1, this.currentLoadingMessage = this.getRandomLoadingMessage(), this.messages = [], this.conversationId = null, this.botDescription = "", this.botTitle = "", this.defaultSuggestions = [], this.inputText = "", this.authentication = void 0, this.portalUrl = "https://www.arcgis.com", this.getFinderResponse = async () => [], this.hubTelemetry = d(), this.arcgisAddDataClick = d(), this.arcgisLocationClick = d();
+    }, this.handleSuggestionClicked = async (e) => {
+      const t = Number.parseInt(e.target.dataset.index, 10), s = this.defaultSuggestions[t], a = this.getSuggestionLabel(s);
+      await this.submitUserMessage(a, "suggest");
+    }, this.handleAddDataClick = (e) => {
+      const { sourceId: t, messageId: s } = e.target.dataset, n = this.getMessageById(s)?.sources?.find((c) => c.id === t);
+      n && (this.arcgisAddDataClick.emit({
+        type: "dataset",
+        title: n.title,
+        data: { id: n.id }
+      }), this.hubTelemetry.emit(o.category.interaction.action.add.label.content));
+    }, this.handleLocationClick = (e) => {
+      const t = e.target.dataset.messageId, s = this.getMessageById(t);
+      s?.location && this.arcgisLocationClick.emit(s.location);
+    }, this.handleViewDetailsClick = () => {
+      this.hubTelemetry.emit(o.category.navigation.action.view.label.entityView);
+    }, this.isLoading = !1, this.currentLoadingMessage = this.getRandomLoadingMessage(), this.messages = [], this.conversationId = null, this.botDescription = "", this.botTitle = "", this.defaultSuggestions = [], this.inputText = "", this.authentication = void 0, this.portalUrl = "https://www.arcgis.com", this.getFinderResponse = async () => [], this.arcgisAddDataClick = g(), this.arcgisLocationClick = g(), this.hubTelemetry = g(), this.listen("calciteInternalAccordionChange", this.handleAccordionChange);
   }
   static {
     this.properties = { isLoading: 16, currentLoadingMessage: 16, messages: 16, devFeatureMessage: 0, conversationId: 1, botDescription: 1, botTitle: 1, defaultSuggestions: 0, inputText: 1, authentication: 0, portalUrl: 1, getFinderResponse: 0 };
   }
   static {
-    this.styles = M;
-  }
-  submitUserMessage(t, e) {
+    this.styles = S;
+  }
+  get welcomeMessages() {
+    const e = [
+      { text: this._messages.accuracyResponse, key: "accuracy-response" },
+      { text: this._messages.questionResponse, key: "question-response" }
+    ];
+    return this.botDescription && e.splice(0, 0, { text: this.botDescription, key: "bot-description" }), this.botTitle && e.splice(0, 0, {
+      text: this._messages.welcomeText.replace("{botTitle}", this.botTitle),
+      key: "bot-title"
+    }), e;
+  }
+  async submitUserMessage(e, t) {
     this.inputText = "";
-    const i = structuredClone(this.messages), r = {
-      author: a.USER,
-      text: t,
-      messageId: i.length + 1
+    const s = structuredClone(this.messages), a = {
+      author: r.USER,
+      text: e,
+      messageId: s.length + 1
       // Increment message ID for tracking
     };
-    i.push(r), this.messages = i, this.scrollToBottomAfterUpdate(), this.handleDevFeatures(i, t) || this.handleUserMessage(e);
+    s.push(a), this.messages = s, this.scrollToBottomAfterUpdate(), this.handleDevFeatures(s, e) || this.handleUserMessage(t);
+  }
+  handleAccordionChange(e) {
+    const { expanded: t, dataset: { fieldName: s } } = e.detail.requestedAccordionItem, a = t ? o.category.interaction.action.close.label.accordion.details.attribute : o.category.interaction.action.open.label.accordion.details.attribute;
+    this.hubTelemetry.emit({ ...a, details: s });
   }
   getRandomLoadingMessage() {
-    return f[Math.floor(Math.random() * f.length)];
+    return b[Math.floor(Math.random() * b.length)];
   }
-  setMessagesContainer(t) {
-    this.messagesContainer = t;
+  setMessagesContainer(e) {
+    this.messagesContainer = e;
   }
   scrollToBottomAfterUpdate() {
     this.updateComplete.then(() => {
@@ -74,84 +105,97 @@ class $ extends w {
       behavior: "smooth"
     });
   }
-  handleInputTextChange(t) {
-    this.inputText = t.target.value;
+  handleInputTextChange(e) {
+    this.inputText = e.target.value;
   }
-  handleDevFeatures(t, e) {
-    if (e === "::trees" && this.devFeatureMessage) {
-      const i = { ...this.devFeatureMessage, messageId: t.length + 1 };
-      return t.push(i), this.messages = t, !0;
+  handleDevFeatures(e, t) {
+    if (t === "::trees" && this.devFeatureMessage) {
+      const s = { ...this.devFeatureMessage, messageId: e.length + 1 };
+      return e.push(s), this.messages = e, !0;
     }
     return !1;
   }
-  handleChatError(t) {
+  handleChatError(e) {
     this.setLoading(!1);
-    const e = {
-      text: "Sorry, I encountered an error while processing your request. Please try again.",
-      author: a.HUB,
-      messageId: t.length + 1
+    const t = {
+      text: this._messages.errorText,
+      author: r.HUB,
+      messageId: e.length + 1
     };
-    t.push(e), this.messages = t, this.scrollToBottomAfterUpdate();
+    e.push(t), this.messages = e, this.scrollToBottomAfterUpdate();
   }
-  setLoading(t) {
-    this.isLoading = t, t ? (this.currentLoadingMessage = this.getRandomLoadingMessage(), this.loadingIntervalId = window.setInterval(() => {
+  setLoading(e) {
+    this.isLoading = e, e ? (this.currentLoadingMessage = this.getRandomLoadingMessage(), this.loadingIntervalId = window.setInterval(() => {
       this.currentLoadingMessage = this.getRandomLoadingMessage();
     }, this.loadingMessageIntervalMs), this.scrollToBottomAfterUpdate()) : this.loadingIntervalId && (clearInterval(this.loadingIntervalId), this.loadingIntervalId = void 0);
   }
-  async handleUserMessage(t) {
-    const e = structuredClone(this.messages), i = e[e.length - 1].text;
-    let r = 0;
-    const h = Date.now();
+  async handleUserMessage(e) {
+    const t = structuredClone(this.messages), s = t[t.length - 1].text;
+    let a = 0;
+    const n = Date.now();
     try {
       this.setLoading(!0);
-      const g = await this.getFinderResponse(i, this.conversationId);
-      r = Date.now() - h;
-      const c = g[1];
-      if (this.conversationId ??= c.conversationId, S(c.context)) {
-        const l = c.context, y = Array.isArray(l.sources) && l.sources.length > 0 ? await L(l.sources, this.authentication) : [], m = {
-          ...l,
+      const c = await this.getFinderResponse(s, this.conversationId);
+      a = Date.now() - n;
+      const h = c[1];
+      if (this.conversationId ??= h.conversationId, $(h.context)) {
+        const d = h.context, y = Array.isArray(d.sources) && d.sources.length > 0 ? await D(d.sources, this.authentication) : [], m = {
+          ...d,
           sources: y,
-          messageId: e.length + 1,
-          author: a.HUB
+          messageId: t.length + 1,
+          author: r.HUB
         };
-        e[e.length - 1].text === "trees" && (this.devFeatureMessage = m), this.setLoading(!1), e.push(m), this.messages = e;
+        t[t.length - 1].text === "trees" && (this.devFeatureMessage = m), this.setLoading(!1), t.push(m), this.messages = t;
       } else
-        this.handleChatError(e);
+        this.handleChatError(t);
       this.scrollToBottomAfterUpdate(), this.hubTelemetry.emit({
-        ...p.category.interaction.action.search.label[t],
-        search: i,
-        response: u.response.SUCCESS,
-        duration: r.toFixed(2)
+        ...o.category.interaction.action.search.label[e],
+        search: s,
+        response: f.response.SUCCESS,
+        duration: a.toFixed(2)
       });
     } catch {
-      r = Date.now() - h, this.handleChatError(e), this.hubTelemetry.emit({
-        ...p.category.interaction.action.search.label[t],
-        search: i,
-        response: u.response.FAILURE,
-        duration: r.toFixed(2)
+      a = Date.now() - n, this.handleChatError(t), this.hubTelemetry.emit({
+        ...o.category.interaction.action.search.label[e],
+        search: s,
+        response: f.response.FAILURE,
+        duration: a.toFixed(2)
       });
     }
   }
-  renderSuggestions(t) {
-    return t.map((e) => o`<calcite-button round icon-start=${(typeof e == "string" ? "effects" : e.icon) ?? I} @click=${() => this.submitUserMessage(typeof e == "string" ? e : e.label, "suggest")} .disabled=${this.isLoading} appearance=outline-fill>${typeof e == "string" ? e : e.label}</calcite-button>`);
+  getSuggestionLabel(e) {
+    return typeof e == "string" ? e : e.label;
+  }
+  getMessageById(e) {
+    const t = e ? Number.parseInt(e) : NaN;
+    return this.messages.find((s) => !!s.messageId && s.messageId === t);
+  }
+  renderSuggestions(e) {
+    return e.map((t, s) => {
+      const a = this.getSuggestionLabel(t);
+      return u(a, l`<calcite-button data-index=${s ?? p} round icon-start=${(typeof t == "string" ? "effects" : t.icon) ?? p} @click=${this.handleSuggestionClicked} .disabled=${this.isLoading} appearance=outline-fill>${a}</calcite-button>`);
+    });
   }
   renderWelcomeMessages() {
-    return o`${this.botTitle && n({ message: { author: a.HUB, text: `Welcome to the ${this.botTitle} assistant.` } }) || ""}${this.botDescription && n({ message: { author: a.HUB, text: this.botDescription } }) || ""}${n({ message: {
-      author: a.HUB,
-      text: "AI generated responses may occasionally be incorrect. Review carefully."
-    } })}${n({ message: { author: a.HUB, text: "How can I assist you today?" } })}`;
+    return this.welcomeMessages.map(({ text: e, key: t }) => this.renderChatResponse({
+      author: r.HUB,
+      text: e
+    }, t));
   }
   renderForm() {
-    return o`<form @submit=${this.handleFormSubmit}><calcite-input-text .disabled=${this.isLoading} id=request-input placeholder="What are you searching for...?" @calciteInputTextInput=${this.handleInputTextChange} .value=${this.inputText}></calcite-input-text><div class="action-buttons"><calcite-button appearance=outline icon-start=reset @click=${this.handleClearHistory} .disabled=${this.isLoading}>Clear History</calcite-button><calcite-button type=submit icon-start=send .disabled=${this.isLoading || !this.inputText.trim()}>Send</calcite-button></div></form>`;
+    return l`<form @submit=${this.handleFormSubmit}><calcite-input-text .disabled=${this.isLoading} id=request-input .placeholder=${this._messages.inputPlaceholder} @calciteInputTextInput=${this.handleInputTextChange} .value=${this.inputText}></calcite-input-text><div class="action-buttons"><calcite-button appearance=outline icon-start=reset @click=${this.handleClearHistory} .disabled=${this.isLoading}>${this._messages.clearButtonText}</calcite-button><calcite-button type=submit icon-start=send .disabled=${this.isLoading || !this.inputText.trim()}>${this._messages.submitButtonText}</calcite-button></div></form>`;
+  }
+  renderChatResponse(e, t) {
+    return u(t, C({ message: e, addDataClick: this.handleAddDataClick, addDataLabel: this._messages.addDataLabel, addLocationClick: this.handleLocationClick, addLocationLabel: this._messages.addDataLabel, viewDetailsClick: this.handleViewDetailsClick, viewDetailsLabel: this._messages.viewDetailsLabel, portalUrl: this.portalUrl }));
   }
   renderMessageContainer() {
-    return o`<div class="messages" ${v(this.setMessagesContainer)}>${this.renderWelcomeMessages()}<div><div class="actionsTitle">Suggested prompts</div><div id=actions>${this.renderSuggestions(this.defaultSuggestions)}</div></div>${this.messages.map((t) => n({ message: t, addDataClick: (e) => this.arcgisAddDataClick.emit(e), addLocationClick: (e) => this.arcgisLocationClick.emit(e), addTelemetryClick: (e) => this.hubTelemetry.emit(e), portalUrl: this.portalUrl }))}${this.isLoading && k({ showSkeletonLoader: !1, currentLoadingMessage: this.currentLoadingMessage }) || ""}</div>`;
+    return l`<div class="messages" ${w(this.setMessagesContainer)}>${this.renderWelcomeMessages()}<div><div class="actionsTitle">${this._messages.suggestionsHeader}</div><div id=actions>${this.renderSuggestions(this.defaultSuggestions)}</div></div>${this.messages.map((e) => this.renderChatResponse(e, `message-${e.messageId}`))}${this.isLoading && T({ currentLoadingMessage: this.currentLoadingMessage }) || ""}</div>`;
   }
   render() {
-    return o`${this.renderMessageContainer()}${this.renderForm()}`;
+    return l`${this.renderMessageContainer()}${this.renderForm()}`;
   }
 }
-b("arcgis-chat-ui", $);
+v("arcgis-chat-ui", F);
 export {
-  $ as ArcgisChatUI
+  F as ArcgisChatUI
 };

package/dist/components/arcgis-chat-ui/functional/chat-action/customElement.d.ts

@@ -1,10 +1,13 @@
 /// <reference types="../../index.d.ts" />
 import { TemplateResult } from 'lit-html';
 import { ChatSource } from '../../util/types';
-export declare const ChatAction: ({ source, domain, showOutlinks, addDataClick, addTelemetryClick, }: {
+export declare const ChatAction: ({ messageId, source, domain, showOutlinks, addDataClick, addDataLabel, viewDetailsClick, viewDetailsLabel, }: {
+    messageId?: number;
     source: ChatSource;
     domain: string;
     showOutlinks?: boolean;
-    addDataClick: () => void;
-    addTelemetryClick: (e: Event) => void;
+    addDataClick: (arg0: PointerEvent) => void;
+    addDataLabel: string;
+    viewDetailsClick: (arg0: PointerEvent) => void;
+    viewDetailsLabel: string;
 }) => TemplateResult;

package/dist/components/arcgis-chat-ui/functional/chat-action/customElement.js

@@ -2,8 +2,8 @@ import "lit-html";
 import "@arcgis/lumina";
 import { C as m } from "../../../../chunks/chat-action.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
 export {
   m as ChatAction
 };

package/dist/components/arcgis-chat-ui/functional/chat-response/customElement.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="../../index.d.ts" />
 import { TemplateResult } from 'lit-html';
-import { ChatMessage, AddDataAction } from '../../util/types';
-import { FinderLocation } from '../../../arcgis-hub-ai-assistant/util/framework';
-export declare const ChatResponse: ({ message, addDataClick, addLocationClick, addTelemetryClick, portalUrl, }: {
+import { ChatMessage } from '../../util/types';
+export declare const ChatResponse: ({ message, addDataClick, addDataLabel, addLocationClick, addLocationLabel, viewDetailsClick, viewDetailsLabel, portalUrl, }: {
     message: ChatMessage;
-    addDataClick?: (arg0: AddDataAction) => void;
-    addLocationClick?: (arg0: FinderLocation) => void;
-    addTelemetryClick?: (arg0: Record<string, unknown>) => void;
+    addDataClick: (arg0: PointerEvent) => void;
+    addDataLabel: string;
+    addLocationClick: (arg0: PointerEvent) => void;
+    addLocationLabel: string;
+    viewDetailsClick: (arg0: PointerEvent) => void;
+    viewDetailsLabel: string;
     portalUrl?: string;
 }) => TemplateResult;