@esri/hub-web-components 0.1.0 → 0.2.0

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

@@ -1,17 +1,17 @@
-import { c as y } from "../../chunks/runtime.js";
+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 T, createEvent as c, nothing as I } from "@arcgis/lumina";
-import { css as w } from "@lit/reactive-element/css-tag.js";
-import { ChatResponse as n } from "./components/chat-response/customElement.js";
-import { ChatStatus as M } from "./components/chat-status/customElement.js";
-import { isFinderResponseContext as k, enrichSources as C } from "../arcgis-hub-ai-assistant/util/customElement.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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.1/esri/copyright.txt for details.
-v0.1.0 */
-const L = w`.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 i = /* @__PURE__ */ ((r) => (r.USER = "Human", r.HUB = "AI", r.SYSTEM = "System", r))(i || {});
+See https://js.arcgis.com/0.2/esri/copyright.txt for details.
+v0.2.0 */
+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 = [
   "Searching for relevant datasets...",
   "Analyzing your query...",
@@ -20,30 +20,42 @@ const f = [
   "Filtering data...",
   "Creating map...",
   "Fetching the latest statistics..."
-];
-class S extends T {
+], L = async (s, t) => await Promise.all(s.map(async (e) => await U(e, t))), U = async (s, t) => {
+  const e = structuredClone(s);
+  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;
+  } catch {
+    console.error("Could not enrich:", s);
+  }
+  return e;
+};
+function S(s) {
+  return !!s && typeof s == "object" && "kind" in s && s.kind === "FinderResponse";
+}
+class $ extends w {
   constructor() {
     super(...arguments), this.loadingMessageIntervalMs = 6e3, this.handleFormSubmit = (t) => {
       t.preventDefault(), this.inputText.trim() && 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.getFinderResponse = async () => [], this.hubTelemetry = c(), this.arcgisAddDataClick = c(), this.arcgisLocationClick = c();
+    }, 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();
   }
   static {
-    this.properties = { isLoading: 16, currentLoadingMessage: 16, messages: 16, devFeatureMessage: 0, conversationId: 1, botDescription: 1, botTitle: 1, defaultSuggestions: 0, inputText: 1, getFinderResponse: 0 };
+    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 = L;
+    this.styles = M;
   }
   submitUserMessage(t, e) {
     this.inputText = "";
-    const s = structuredClone(this.messages), a = {
-      author: i.USER,
+    const i = structuredClone(this.messages), r = {
+      author: a.USER,
       text: t,
-      messageId: s.length + 1
+      messageId: i.length + 1
       // Increment message ID for tracking
     };
-    s.push(a), this.messages = s, this.scrollToBottomAfterUpdate(), this.handleDevFeatures(s, t) || this.handleUserMessage(e);
+    i.push(r), this.messages = i, this.scrollToBottomAfterUpdate(), this.handleDevFeatures(i, t) || this.handleUserMessage(e);
   }
   getRandomLoadingMessage() {
     return f[Math.floor(Math.random() * f.length)];
@@ -67,8 +79,8 @@ class S extends T {
   }
   handleDevFeatures(t, e) {
     if (e === "::trees" && this.devFeatureMessage) {
-      const s = { ...this.devFeatureMessage, messageId: t.length + 1 };
-      return t.push(s), this.messages = t, !0;
+      const i = { ...this.devFeatureMessage, messageId: t.length + 1 };
+      return t.push(i), this.messages = t, !0;
     }
     return !1;
   }
@@ -76,7 +88,7 @@ class S extends T {
     this.setLoading(!1);
     const e = {
       text: "Sorry, I encountered an error while processing your request. Please try again.",
-      author: i.HUB,
+      author: a.HUB,
       messageId: t.length + 1
     };
     t.push(e), this.messages = t, this.scrollToBottomAfterUpdate();
@@ -87,36 +99,36 @@ class S extends T {
     }, this.loadingMessageIntervalMs), this.scrollToBottomAfterUpdate()) : this.loadingIntervalId && (clearInterval(this.loadingIntervalId), this.loadingIntervalId = void 0);
   }
   async handleUserMessage(t) {
-    const e = structuredClone(this.messages), s = e[e.length - 1].text;
-    let a = 0;
+    const e = structuredClone(this.messages), i = e[e.length - 1].text;
+    let r = 0;
     const h = Date.now();
     try {
       this.setLoading(!0);
-      const g = await this.getFinderResponse(s, this.conversationId);
-      a = Date.now() - h;
-      const l = g[1];
-      if (this.conversationId ??= l.conversationId, k(l.context)) {
-        const d = l.context, b = Array.isArray(d.sources) && d.sources.length > 0 ? await C(d.sources) : [], m = {
-          ...d,
-          sources: b,
+      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,
+          sources: y,
           messageId: e.length + 1,
-          author: i.HUB
+          author: a.HUB
         };
         e[e.length - 1].text === "trees" && (this.devFeatureMessage = m), this.setLoading(!1), e.push(m), this.messages = e;
       } else
         this.handleChatError(e);
       this.scrollToBottomAfterUpdate(), this.hubTelemetry.emit({
         ...p.category.interaction.action.search.label[t],
-        search: s,
+        search: i,
         response: u.response.SUCCESS,
-        duration: a.toFixed(2)
+        duration: r.toFixed(2)
       });
     } catch {
-      a = Date.now() - h, this.handleChatError(e), this.hubTelemetry.emit({
+      r = Date.now() - h, this.handleChatError(e), this.hubTelemetry.emit({
         ...p.category.interaction.action.search.label[t],
-        search: s,
+        search: i,
         response: u.response.FAILURE,
-        duration: a.toFixed(2)
+        duration: r.toFixed(2)
       });
     }
   }
@@ -124,22 +136,22 @@ class S extends 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>`);
   }
   renderWelcomeMessages() {
-    return o`${this.botTitle && n({ message: { author: i.HUB, text: `Welcome to the ${this.botTitle} assistant.` } }) || ""}${this.botDescription && n({ message: { author: i.HUB, text: this.botDescription } }) || ""}${n({ message: {
-      author: i.HUB,
+    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: i.HUB, text: "How can I assist you today?" } })}`;
+    } })}${n({ message: { author: a.HUB, text: "How can I assist you today?" } })}`;
   }
   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>`;
   }
   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) }))}${this.isLoading && M({ showSkeletonLoader: !1, currentLoadingMessage: this.currentLoadingMessage }) || ""}</div>`;
+    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>`;
   }
   render() {
     return o`${this.renderMessageContainer()}${this.renderForm()}`;
   }
 }
-y("arcgis-chat-ui", S);
+b("arcgis-chat-ui", $);
 export {
-  S as ArcgisChatUI
+  $ as ArcgisChatUI
 };

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

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

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

@@ -0,0 +1,9 @@
+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.0 */
+export {
+  m as ChatAction
+};

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

@@ -0,0 +1,11 @@
+/// <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, }: {
+    message: ChatMessage;
+    addDataClick?: (arg0: AddDataAction) => void;
+    addLocationClick?: (arg0: FinderLocation) => void;
+    addTelemetryClick?: (arg0: Record<string, unknown>) => void;
+    portalUrl?: string;
+}) => TemplateResult;

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

@@ -0,0 +1,52 @@
+import { html as c } from "lit-html";
+import { c as $, C as y } from "../../../../chunks/chat-action.js";
+import b from "@arcgis/core/portal/PortalItem.js";
+import x from "@arcgis/core/layers/Layer.js";
+import { dictionary as n } from "@esri/telemetry-dictionary-hub";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/0.2/esri/copyright.txt for details.
+v0.2.0 */
+const R = ({ message: a, addDataClick: l, addLocationClick: p, addTelemetryClick: r, portalUrl: d = "https://hub.arcgis.com" }) => {
+  function m(t) {
+    return c`<calcite-accordion-item heading=Reasoning description="Explanation of the AI Assistant process" icon-start=automation data-field-name=Reasoning><ol>${t.map((i) => c`<li>Tool: ${i.name}${Object.keys(i.parameters).map((e) => {
+      let o = i.parameters[e];
+      return e === "sources" && Array.isArray(o) ? o = o.map((s) => s.title).join(", ") : e === "location" && (o = o.name), c`<div>${e}: ${JSON.stringify(o)}</div>`;
+    })}</li>`)}</ol></calcite-accordion-item>`;
+  }
+  function u(t) {
+    return c`<calcite-accordion-item description="Relevant data sources" heading=Sources icon-start=information data-field-name=Sources expanded><div class="sources">${t.map((i) => c`<div class="wrapper source">${y({ source: i, domain: d.split("//")[1], showOutlinks: !0, addDataClick: () => {
+      const e = {
+        type: "dataset",
+        title: i.title,
+        data: { id: i.id }
+      };
+      l?.(e), r?.(n.category.interaction.action.add.label.content);
+    }, addTelemetryClick: () => {
+      r?.(n.category.navigation.action.view.label.entityView);
+    } })}</div>`)}</div></calcite-accordion-item>`;
+  }
+  function h(t) {
+    return c`<calcite-accordion-item description="See the layers" heading=Map icon-start=map data-field-name=Map expanded><div>${t.name}</div><arcgis-map .center=${[t.longitude, t.latitude]} .zoom=${t.zoom ?? void 0} basemap=gray-vector @arcgisViewReadyChange=${g}><arcgis-zoom position=top-left></arcgis-zoom><arcgis-expand position=top-right><arcgis-layer-list></arcgis-layer-list></arcgis-expand></arcgis-map><calcite-button round icon-start=extent @click=${() => p?.(t)}>Zoom To Location</calcite-button></calcite-accordion-item>`;
+  }
+  function g(t) {
+    const i = t.target;
+    i.map && a.sources?.length && a.sources.forEach((e) => {
+      const o = new b({
+        id: e.id,
+        portal: { url: d }
+      });
+      x.fromPortalItem({ portalItem: o }).then((s) => {
+        i.map && i.map.add(s);
+      });
+    });
+  }
+  const f = a.sources?.length ?? a.tools?.length ?? !!a.location;
+  function v(t) {
+    const { expanded: i, dataset: { fieldName: e } } = t.detail.requestedAccordionItem, o = i ? n.category.interaction.action.close.label.accordion.details.attribute : n.category.interaction.action.open.label.accordion.details.attribute;
+    r?.({ ...o, details: e });
+  }
+  return c`<div class=${`message author-${a.author}`}><div class="response"><div class="text" .innerHTML=${$(a.text) ?? ""}></div>${f && c`<div class="actions"><link rel=stylesheet href=https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/light/main.css><calcite-accordion @calciteInternalAccordionChange=${(t) => v(t)}>${a.location && h(a.location) || ""}${(a.sources ?? []).length > 0 && u(a.sources ?? []) || ""}${(a.tools ?? []).length > 0 && m(a.tools ?? []) || ""}</calcite-accordion></div>` || ""}</div></div>`;
+};
+export {
+  R as ChatResponse
+};

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

@@ -0,0 +1,8 @@
+import { html as e } from "lit-html";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/0.2/esri/copyright.txt for details.
+v0.2.0 */
+const l = ({ showSkeletonLoader: s, currentLoadingMessage: d }) => s ? e`<div class="loader"><div class="skeleton-loader"></div><div class="skeleton-loader"></div><div class="skeleton-loader"></div><div class="square-container"><div class="skeleton-loader square"></div><div class="skeleton-loader square"></div></div></div>` : e`<div class="status-message">${d}</div>`;
+export {
+  l as ChatStatus
+};

package/dist/components/arcgis-hub-ai-assistant/customElement.js

@@ -1,86 +1,95 @@
 import { c as T } from "../../chunks/runtime.js";
-import { html as y } from "lit-html";
-import { LitElement as x, noShadowRoot as E } from "@arcgis/lumina";
-import { getLocationCenter as R, calculateZoom as D } from "./util/customElement.js";
-import { css as C } from "@lit/reactive-element/css-tag.js";
-import { getPortalSettings as P, getItem as _, getItemData as z } from "@esri/arcgis-rest-portal";
-import { createRef as L, ref as w } from "lit/directives/ref.js";
+import { html as I } from "lit-html";
+import { LitElement as E, noShadowRoot as R } from "@arcgis/lumina";
+import { css as D } from "@lit/reactive-element/css-tag.js";
+import { getPortalSettings as z, getItem as C, getItemData as M } from "@esri/arcgis-rest-portal";
+import { createRef as P, ref as S } from "lit/directives/ref.js";
 import U from "@arcgis/core/layers/Layer.js";
-import M from "@arcgis/core/portal/PortalItem.js";
+import x from "@arcgis/core/portal/PortalItem.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.1/esri/copyright.txt for details.
-v0.1.0 */
-async function V(o) {
+See https://js.arcgis.com/0.2/esri/copyright.txt for details.
+v0.2.0 */
+async function _(e) {
   const {
     skillId: t,
-    message: e,
-    context: s,
-    token: i,
-    conversationId: a,
-    apiUrl: c = "https://api.example.com",
-    pauseMs: S = 1e3,
-    retries: k = 3
-  } = o, d = {
-    Authorization: `Bearer ${i}`,
+    message: s,
+    context: a,
+    token: o,
+    conversationId: i,
+    apiUrl: r = "https://api.example.com",
+    pauseMs: h = 1e3,
+    retries: u = 3
+  } = e, p = {
+    Authorization: `Bearer ${o}`,
     Accept: "application/json",
     "Content-Type": "application/json"
-  }, u = `${c}/skills/${t}/chat`, m = { message: e, context: s };
-  a && (m.conversationId = a);
+  }, g = `${r}/skills/${t}/chat`, f = { message: s, context: a };
+  i && (f.conversationId = i);
   try {
-    const r = await fetch(u, {
+    const l = await fetch(g, {
       method: "POST",
-      headers: d,
-      body: JSON.stringify(m)
+      headers: p,
+      body: JSON.stringify(f)
     });
-    if (!r.ok)
-      throw new Error(`HTTP error! status: ${r.status}`);
-    const n = await r.json(), $ = a ?? n.conversationId, A = n.inquiryId;
-    let g = n.hasMore || n.message == null, f = n.sequenceNumber;
-    const h = [];
-    n.message && h.push(n);
-    let b = 0;
-    for (; g && b < k; ) {
-      await new Promise((v) => setTimeout(v, S));
-      const p = await fetch(u, {
+    if (!l.ok)
+      throw new Error(`HTTP error! status: ${l.status}`);
+    const n = await l.json(), k = i ?? n.conversationId, A = n.inquiryId;
+    let b = n.hasMore || n.message == null, y = n.sequenceNumber;
+    const d = [];
+    n.message && d.push(n);
+    let w = 0;
+    for (; b && w < u; ) {
+      await new Promise((v) => setTimeout(v, h));
+      const m = await fetch(g, {
         method: "POST",
-        headers: d,
+        headers: p,
         body: JSON.stringify({
-          conversationId: $,
+          conversationId: k,
           inquiryId: A,
-          ackSequenceNumber: f
+          ackSequenceNumber: y
         })
       });
-      if (!p.ok)
-        throw new Error(`HTTP error! status: ${p.status}`);
-      const l = await p.json();
-      l.message && h.push(l), g = l.hasMore, l.message != null && (f += 1), b++;
+      if (!m.ok)
+        throw new Error(`HTTP error! status: ${m.status}`);
+      const c = await m.json();
+      c.message && d.push(c), b = c.hasMore, c.message != null && (y += 1), w++;
     }
-    return h;
-  } catch (r) {
-    return console.error("Error during request:", r), [];
+    return d;
+  } catch (l) {
+    return console.error("Error during request:", l), [];
   }
 }
-async function q({
-  message: o,
+async function L({
+  message: e,
   context: t,
-  token: e,
-  conversationId: s,
-  apiUrl: i = "https://hub.arcgis.com/api/assistants/v1",
-  pauseMs: a = 1e3,
-  retries: c = 50
+  token: s,
+  conversationId: a,
+  apiUrl: o = "https://hub.arcgis.com/api/assistants/v1",
+  pauseMs: i = 1e3,
+  retries: r = 50
 }) {
-  return await V({
+  return await _({
     skillId: "finder",
-    message: o,
+    message: e,
     context: t,
-    token: e,
-    conversationId: s ?? void 0,
-    apiUrl: i,
-    pauseMs: a,
-    retries: c
+    token: s,
+    conversationId: a ?? void 0,
+    apiUrl: o,
+    pauseMs: i,
+    retries: r
   });
 }
-const F = C`@layer{arcgis-hub-ai-assistant{arcgis-feature-table{height:200px}}}`, I = {
+const V = (e) => {
+  if (!e)
+    return [0, 0];
+  const t = e[0][0], s = e[0][1], a = e[1][0], i = (e[1][1] + s) / 2;
+  return [(a + t) / 2, i];
+}, q = (e) => {
+  if (!e)
+    return 5;
+  const t = e[0][0], s = e[0][1], a = e[1][0], o = e[1][1], i = Math.abs(a - t), r = Math.abs(o - s), h = Math.log2(360 / i), u = Math.log2(180 / r);
+  return Math.floor(Math.min(h, u)) + 2;
+}, H = D`@layer{arcgis-hub-ai-assistant{arcgis-feature-table{height:200px}}}`, $ = {
   language: "en",
   defaultSuggestions: ["What can I do with this assistant?"],
   personality: "You are writing for a government websites readable by 8th graders."
@@ -88,48 +97,48 @@ const F = C`@layer{arcgis-hub-ai-assistant{arcgis-feature-table{height:200px}}}`
   // allowChat: false,
   // showHeader: true,
 };
-async function H({
-  portal: o,
+async function F({
+  portal: e,
   authentication: t
 }) {
   try {
-    const s = await P(void 0, {
-      portal: o,
+    const a = await z(void 0, {
+      portal: e,
       authentication: t
     });
-    return s.aiAssistantsEnabled === void 0 || s.aiAssistantsEnabled && !s.blockBetaApps ? !0 : (console.warn("AI Assistants are not enabled for this organization."), !1);
-  } catch (e) {
-    return console.error("Error fetching organization assistant settings:", e), !1;
+    return a.aiAssistantsEnabled === void 0 || a.aiAssistantsEnabled && !a.blockBetaApps ? !0 : (console.warn("AI Assistants are not enabled for this organization."), !1);
+  } catch (s) {
+    return console.error("Error fetching organization assistant settings:", s), !1;
   }
 }
-async function O(o, t, e) {
+async function O(e, t, s) {
   try {
-    const [s, i] = await Promise.all([
-      _(o, { authentication: t, portal: e }),
+    const [a, o] = await Promise.all([
+      C(e, { authentication: t, portal: s }),
       // , { authentication: state.context.hubRequestOptions.authentication }
-      z(o, { authentication: t, portal: e })
+      M(e, { authentication: t, portal: s })
       // , { authentication: state.context.hubRequestOptions.authentication }
     ]);
     return {
-      ...I,
-      title: s.title,
-      description: i.assistant?.description,
-      extent: s.extent,
+      ...$,
+      title: a.title,
+      description: o.assistant?.description,
+      extent: a.extent,
       // context: item.accessInformation as string,
       // placeholder: itemData.placeholder,
       // theme: itemData.theme,
       // avatar: itemData.avatar,
       // language: itemData.language,
       // clientId: itemData.clientId,
-      personality: i.assistant?.personality,
+      personality: o.assistant?.personality,
       // feedbackFormUrl: itemData.feedbackFormUrl,
       // hub: extractDomain(itemData.hub),
       // allowChat: itemData.allowChat,
       // showHeader: itemData.showHeader,
       // entityId: itemData.entityId,
-      location: i.assistant?.location ?? "",
+      location: o.assistant?.location ?? "",
       // tools: itemData.tools,
-      defaultSuggestions: i.assistant?.examplePrompts ?? I.defaultSuggestions,
+      defaultSuggestions: o.assistant?.examplePrompts ?? $.defaultSuggestions,
       context: "",
       hub: "",
       allowChat: !1,
@@ -137,28 +146,29 @@ async function O(o, t, e) {
       entityId: "",
       tools: []
     };
-  } catch (s) {
-    throw console.error("Error fetching configuration:", s), s;
+  } catch (a) {
+    throw console.error("Error fetching configuration:", a), a;
   }
 }
-class j extends x {
+class j extends E {
   constructor() {
-    super(...arguments), this._featureTable = L(), this.handleArcGISDataClick = (t) => {
-      const s = t.detail.data.id, i = new M({
-        id: s
+    super(...arguments), this._featureTable = P(), this.handleArcGISDataClick = (t) => {
+      const a = t.detail.data.id, o = new x({
+        id: a,
+        portal: { url: this.portalUrl }
       });
       U.fromPortalItem({
-        portalItem: i
-      }).then((a) => {
-        this._mapRef?.map?.add(a), this._featureTable.value && (this._featureTable.value.layer = a), this.mapLayers.push(s), this.mapVisible = !0;
-      }).catch((a) => {
-        console.log("could not add layer:", a);
+        portalItem: o
+      }).then((i) => {
+        this._mapRef?.map?.add(i), this._featureTable.value && (this._featureTable.value.layer = i), this.mapLayers.push(a), this.mapVisible = !0;
+      }).catch((i) => {
+        console.log("could not add layer:", i);
       });
     }, this.handleArcGISLocationClick = (t) => {
-      const e = t.detail;
-      e.longitude && e.latitude && e.zoom && (this.mapVisible = !0, this._mapRef?.view.goTo({
-        center: [e.longitude, e.latitude],
-        zoom: e.zoom
+      const s = t.detail;
+      s.longitude && s.latitude && s.zoom && (this.mapVisible = !0, this._mapRef?.view.goTo({
+        center: [s.longitude, s.latitude],
+        zoom: s.zoom
       }));
     }, this.assistantsEnabled = !1, this.mapEnabled = !1, this.mapVisible = !1, this.itemId = null, this.portalUrl = "https://www.arcgis.com", this.apiUrl = "/api/assistants/v1", this.botTitle = "Hub AI Assistant", this.extent = [
       [-77.119, 38.791],
@@ -169,13 +179,13 @@ class j extends x {
     this.properties = { assistantsEnabled: 16, _mapRef: 16, mapEnabled: 5, mapVisible: 5, itemId: 1, portalUrl: 1, apiUrl: 1, botTitle: 1, extent: 0, mapLayers: 0, mapShowTable: 5, mapBasemap: 1, location: 1, hub: 1, entityId: 1, context: 1, language: 1, botDescription: 1, defaultSuggestions: 0, authentication: 0 };
   }
   static {
-    this.shadowRootOptions = E;
+    this.shadowRootOptions = R;
   }
   static {
-    this.styles = F;
+    this.styles = H;
   }
   async load() {
-    if (this.assistantsEnabled = await H({
+    if (this.assistantsEnabled = await F({
       portal: `${this.portalUrl}/sharing/rest`,
       authentication: this.authentication
     }), this.itemId) {
@@ -183,10 +193,10 @@ class j extends x {
       this.botTitle = t.title, this.botDescription = t.description ? t.description : "", this.hub = t.hub, this.location = t.location, this.extent = t.extent, this.defaultSuggestions = t.defaultSuggestions;
     }
   }
-  async handleFinderResponse(t, e) {
-    const s = await q({
+  async handleFinderResponse(t, s) {
+    const a = await L({
       message: t,
-      conversationId: e,
+      conversationId: s,
       context: {
         kind: "FinderRequest",
         item: this.itemId ?? void 0
@@ -194,17 +204,17 @@ class j extends x {
       token: this.authentication?.token ?? "",
       apiUrl: this.apiUrl
     });
-    if (s.length === 0)
+    if (a.length === 0)
       throw new Error("Finder response is empty or invalid");
-    return s;
+    return a;
   }
   _setMapRef(t) {
     this._mapRef = t;
   }
   render() {
-    return y`<link rel=stylesheet href=https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/light/main.css><arcgis-chat-shell .aboutContent=${this.botDescription} .mapEnabled=${this.mapEnabled} .mapVisible=${this.mapEnabled && this.mapVisible} @arcgisUpdateMapVisibility=${(t) => {
+    return I`<link rel=stylesheet href=https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/light/main.css><arcgis-chat-shell .aboutContent=${this.botDescription} .mapEnabled=${this.mapEnabled} .mapVisible=${this.mapEnabled && this.mapVisible} @arcgisUpdateMapVisibility=${(t) => {
       this.mapVisible = t.detail;
-    }}><arcgis-chat-ui .botDescription=${this.botDescription} .botTitle=${this.botTitle} .defaultSuggestions=${this.defaultSuggestions} slot=leftPanel .getFinderResponse=${this.handleFinderResponse.bind(this)} @arcgisAddDataClick=${this.handleArcGISDataClick} @arcgisLocationClick=${this.handleArcGISLocationClick}></arcgis-chat-ui><arcgis-map slot=map .center=${R(this.extent)} .zoom=${D(this.extent)} .basemap=${this.mapBasemap} ${w(this._setMapRef)}><arcgis-zoom position=top-left></arcgis-zoom><arcgis-expand position=top-right><arcgis-layer-list></arcgis-layer-list></arcgis-expand><arcgis-search position=bottom-trailing></arcgis-search></arcgis-map>${this.mapShowTable && y`<arcgis-feature-table .referenceElement=${this._mapRef} slot=featureTable ${w(this._featureTable)}></arcgis-feature-table>` || ""}</arcgis-chat-shell>`;
+    }}><arcgis-chat-ui .botDescription=${this.botDescription} .botTitle=${this.botTitle} .defaultSuggestions=${this.defaultSuggestions} slot=leftPanel .getFinderResponse=${this.handleFinderResponse.bind(this)} @arcgisAddDataClick=${this.handleArcGISDataClick} @arcgisLocationClick=${this.handleArcGISLocationClick} .authentication=${this.authentication} .portalUrl=${this.portalUrl}></arcgis-chat-ui><arcgis-map slot=map .center=${V(this.extent)} .zoom=${q(this.extent)} .basemap=${this.mapBasemap} ${S(this._setMapRef)}><arcgis-zoom position=top-left></arcgis-zoom><arcgis-expand position=top-right><arcgis-layer-list></arcgis-layer-list></arcgis-expand><arcgis-search position=bottom-trailing></arcgis-search></arcgis-map>${this.mapShowTable && I`<arcgis-feature-table .referenceElement=${this._mapRef} slot=featureTable ${S(this._featureTable)}></arcgis-feature-table>` || ""}</arcgis-chat-shell>`;
   }
 }
 T("arcgis-hub-ai-assistant", j);

package/dist/components/arcgis-hub-ai-assistant/util/customElement.d.ts

@@ -1,13 +1,12 @@
 /// <reference types="../../index.d.ts" />
 import { ChatSource } from '../../arcgis-chat-ui/util/types';
 import { FinderSource, FinderResponseContext } from './framework';
+import { ArcGISIdentityManager } from '@esri/arcgis-rest-request';
 /**
  * When the "sources" come back from the AI, they do not have all the item properties. This function "enriches" them
  * so they have all their item properties so we can display them down the component tree.
  */
-export declare const enrichSources: (sources: FinderSource[]) => Promise<ChatSource[]>;
-export declare const getLocationCenter: (extent?: number[][]) => number[];
-export declare const calculateZoom: (extent?: number[][]) => number;
+export declare const enrichSources: (sources: FinderSource[], authentication: ArcGISIdentityManager | undefined) => Promise<ChatSource[]>;
 /**
  * Checks if the provided object is a FinderResponseContext by verifying its "kind" property.
  * Returns true if the object matches the FinderResponseContext type, otherwise false.

package/dist/components/arcgis-hub-ai-assistant/util/map.d.ts

@@ -0,0 +1,2 @@
+export declare const getLocationCenter: (extent?: number[][]) => number[];
+export declare const calculateZoom: (extent?: number[][]) => number;