@arcgis/ai-components 5.1.0-next.4 → 5.1.0-next.41

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

@@ -1,18 +1,20 @@
 /// <reference path="../../index.d.ts" />
 import type Collection from "@arcgis/core/core/Collection.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ChatMessage } from "../arcgis-assistant/types.js";
 
 /** @internal */
 export abstract class ArcgisAssistantChat extends LitElement {
+  /** @default false */
+  accessor copyEnabled: boolean;
+  /** @default false */
+  accessor feedbackEnabled: boolean;
   /** @default false */
   accessor loading: boolean;
   /** @default "" */
   accessor loadingMessage: string;
-  accessor messages: Collection<{
-      type: "prompt" | "response";
-      content?: string;
-      log?: string;
-      error?: string;
-  }>;
+  /** @default false */
+  accessor logEnabled: boolean;
+  accessor messages: Collection<ChatMessage>;
   accessor user: string | undefined;
 }

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

@@ -1,20 +1,20 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as a } from "../../chunks/runtime.js";
-import { css as e, html as t } from "lit";
+import { c as e } from "../../chunks/runtime.js";
+import { css as t, html as s } from "lit";
 import { LitElement as i } from "@arcgis/lumina";
-import { createRef as o, ref as n } from "lit/directives/ref.js";
-import r from "@arcgis/core/core/Collection.js";
-import { watch as l } from "@arcgis/core/core/reactiveUtils.js";
-const c = e`.assistant-chat__messages-container{display:flex;flex:1;flex-direction:column}.assistant-chat__messages-list{padding:var(--calcite-spacing-lg);display:flex;flex-direction:column;gap:var(--calcite-spacing-md);flex:1 1 auto;min-height:0;justify-content:flex-end;overflow:auto}`;
-class d extends i {
+import { createRef as l, ref as n } from "lit/directives/ref.js";
+import o from "@arcgis/core/core/Collection.js";
+import { watch as c } from "@arcgis/core/core/reactiveUtils.js";
+const d = t`.assistant-chat__messages-container{display:flex;flex:1;flex-direction:column}.assistant-chat__messages-list{padding:var(--calcite-spacing-lg);display:flex;flex-direction:column;gap:var(--calcite-spacing-md);flex:1 1 auto;min-height:0;justify-content:flex-end;overflow:auto}`;
+class r extends i {
   constructor() {
-    super(...arguments), this.#s = o(), this.loading = !1, this.loadingMessage = "", this.messages = new r([]);
+    super(...arguments), this.#s = l(), this.feedbackEnabled = !1, this.logEnabled = !1, this.copyEnabled = !1, this.loading = !1, this.loadingMessage = "", this.messages = new o([]);
   }
   static {
-    this.properties = { loading: 5, loadingMessage: 1, user: 1, messages: 0 };
+    this.properties = { feedbackEnabled: 5, logEnabled: 5, copyEnabled: 5, loading: 5, loadingMessage: 1, user: 1, messages: 0 };
   }
   static {
-    this.styles = c;
+    this.styles = d;
   }
   #s;
   firstUpdated() {
@@ -25,7 +25,7 @@ class d extends i {
       this.messages.on("change", () => {
         this.requestUpdate(), this._scrollToEnd();
       }),
-      l(() => this.loading, () => {
+      c(() => this.loading, () => {
         this._scrollToEnd();
       })
     ]);
@@ -36,10 +36,10 @@ class d extends i {
     });
   }
   render() {
-    return t`<div class="assistant-chat__messages-container"><div class="assistant-chat__messages-list"><slot></slot>${this.messages.map((s) => t`<arcgis-assistant-chat-card .type=${s.type} .content=${s.content} .log=${s.log} .error=${s.error} .user=${this.user}></arcgis-assistant-chat-card>`)}${this.loading ? t`<arcgis-assistant-chat-card .loading=${this.loading} .loadingMessage=${this.loadingMessage} type=response></arcgis-assistant-chat-card>` : null}</div><div ${n(this.#s)}></div></div>`;
+    return s`<div class="assistant-chat__messages-container"><div class="assistant-chat__messages-list"><slot></slot>${this.messages.map((a) => s`<arcgis-assistant-chat-card .message=${a} .user=${this.user} .feedbackEnabled=${this.feedbackEnabled} .logEnabled=${this.logEnabled} .copyEnabled=${this.copyEnabled}></arcgis-assistant-chat-card>`)}${this.loading ? s`<arcgis-assistant-chat-card .loading=${this.loading} .loadingMessage=${this.loadingMessage} .message=${{ id: "loading", role: "assistant", content: this.loadingMessage }}></arcgis-assistant-chat-card>` : null}</div><div ${n(this.#s)}></div></div>`;
   }
 }
-a("arcgis-assistant-chat", d);
+e("arcgis-assistant-chat", r);
 export {
-  d as ArcgisAssistantChat
+  r as ArcgisAssistantChat
 };

package/dist/components/arcgis-assistant-chat-card/customElement.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { AssistantMessage, ChatMessage } from "../arcgis-assistant/types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /** @internal */
@@ -17,16 +18,22 @@ export abstract class ArcgisAssistantChatCard extends LitElement {
       logButtonLabel: string;
   }>;
   accessor content: string | undefined;
+  /** @default false */
+  accessor copyEnabled: boolean;
   accessor error: string | undefined;
   /** @default false */
-  accessor feedbackDisabled: boolean;
+  accessor feedbackEnabled: boolean;
   /** @default false */
   accessor loading: boolean;
   accessor loadingMessage: string | undefined;
-  accessor log: string | undefined;
+  accessor log: string[] | undefined;
   /** @default false */
-  accessor timestampDisabled: boolean;
-  /** @default "prompt" */
-  accessor type: "prompt" | "response";
+  accessor logEnabled: boolean;
+  accessor message: ChatMessage | undefined;
+  accessor messageRole: ChatMessage["role"] | undefined;
   accessor user: string | undefined;
+  readonly arcgisFeedback: import("@arcgis/lumina").TargetedEvent<this, AssistantMessage>;
+  readonly "@eventTypes": {
+    arcgisFeedback: ArcgisAssistantChatCard["arcgisFeedback"]["detail"];
+  };
 }

package/dist/components/arcgis-assistant-chat-card/customElement.js

@@ -1,53 +1,87 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as e } from "../../chunks/runtime.js";
-import { css as s, html as t } from "lit";
-import { LitElement as i } from "@arcgis/lumina";
-import { u as c } from "../../chunks/useT9n.js";
-const n = s`.assistant-chat-card__prompt-container{display:flex;align-items:center;gap:var(--calcite-spacing-md);background:color-mix(in srgb,var(--calcite-color-brand) 25%,transparent);padding:var(--calcite-spacing-md);border-radius:var(--calcite-border-radius);width:fit-content;margin-left:auto;justify-content:flex-end}.assistant-chat-card__prompt-avatar{display:flex;align-items:center;justify-content:center}.assistant-chat-card__content-container{display:flex;flex:1;flex-direction:column;width:100%}.assistant-chat-card__response-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--calcite-spacing-sm);width:100%;text-align:left}.assistant-chat-card__response-icon{padding:var(--calcite-spacing-sm);border-radius:var(--calcite-spacing-xl);background:var(--calcite-color-brand);color:var(--calcite-color-foreground-1)}.assistant-chat-card__footer{display:flex;width:100%;justify-content:space-between;padding:0 var(--calcite-spacing-xxs)}.assistant-chat-card__feedback-actions{display:flex;flex-direction:row;gap:var(--calcite-spacing-xxs)}.assistant-chat-card__log-container{padding:0 var(--calcite-spacing-sm);border-radius:var(--calcite-border-radius);margin-bottom:var(--calcite-spacing-sm)}.assistant-chat-card__log{margin:0;font-size:var(--calcite-font-size-sm);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1);width:100%;overflow:auto}.assistant-chat-card__footer-start{display:flex;gap:var(--calcite-spacing-xxs)}@media(min-width:1280px){.assistant-chat-card__prompt-container,.assistant-chat-card__response-container{max-width:80%}}`;
-class r extends i {
+import { c as s } from "../../chunks/runtime.js";
+import { css as i, html as e } from "lit";
+import { LitElement as c, createEvent as o } from "@arcgis/lumina";
+import { u as n } from "../../chunks/useT9n.js";
+import { unsafeHTML as r } from "lit/directives/unsafe-html.js";
+import { createRef as l, ref as d } from "lit/directives/ref.js";
+import { p as h } from "../../chunks/converterUtils.js";
+import { watch as g } from "@arcgis/core/core/reactiveUtils.js";
+const p = i`:host{display:block;container-type:inline-size}.assistant-chat-card__prompt-container{display:flex;align-items:center;gap:var(--calcite-spacing-md);background:color-mix(in srgb,var(--calcite-color-brand) 25%,transparent);color:var(--calcite-color-text-1);padding:var(--calcite-spacing-md);border-radius:var(--calcite-border-radius);width:fit-content;margin-left:auto;justify-content:flex-end}.assistant-chat-card__prompt-avatar{display:flex;align-items:center;justify-content:center}.assistant-chat-card__content-container{display:flex;flex:1;flex-direction:column;width:100%}.assistant-chat-card__response-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--calcite-spacing-sm);width:100%;text-align:left}.assistant-chat-card__response-icon{padding:var(--calcite-spacing-sm);border-radius:var(--calcite-spacing-xl);background:var(--calcite-color-brand);color:var(--calcite-color-foreground-1)}.assistant-chat-card__footer{display:flex;width:100%;justify-content:space-between;padding:0 var(--calcite-spacing-xxs)}.assistant-chat-card__feedback-actions{display:flex;flex-direction:row;gap:var(--calcite-spacing-xxs)}.assistant-chat-card__log-container{padding:0 var(--calcite-spacing-sm);border-radius:var(--calcite-border-radius);margin-bottom:var(--calcite-spacing-sm)}.assistant-chat-card__log{margin:0;background-color:var(--calcite-color-foreground-1);width:100%;max-height:300px;overflow:auto}.assistant-chat-card__log-entry{margin-left:var(--calcite-spacing-sm);padding:var(--calcite-spacing-xxs) var(--calcite-spacing-lg);border-left:1px solid var(--calcite-color-border-1)}.assistant-chat-card__footer-start,.assistant-chat-card__footer-end{display:flex;gap:var(--calcite-spacing-xxs)}@container (min-width: 480px){.assistant-chat-card__prompt-container,.assistant-chat-card__response-container{max-width:80%}}`;
+class _ extends c {
   constructor() {
-    super(...arguments), this._messages = c({ blocking: !0 }), this._showLog = !1, this.loading = !1, this.type = "prompt", this.feedbackDisabled = !1, this.timestampDisabled = !1;
+    super(...arguments), this._messages = n({ blocking: !0 }), this._endRef = l(), this._showLog = !1, this.loading = !1, this.feedbackEnabled = !1, this.logEnabled = !1, this.copyEnabled = !1, this.arcgisFeedback = o();
   }
   static {
-    this.properties = { _showLog: 16, loading: 5, type: 1, feedbackDisabled: 5, timestampDisabled: 5, content: 1, loadingMessage: 1, log: 1, error: 1, user: 1 };
+    this.properties = { _showLog: 16, _role: 16, _content: 16, _log: 16, _error: 16, _feedback: 16, loading: 5, messageRole: 1, feedbackEnabled: 5, logEnabled: 5, copyEnabled: 5, content: 1, loadingMessage: 1, log: 0, error: 1, user: 1, message: 0 };
   }
   static {
-    this.styles = n;
+    this.styles = p;
+  }
+  get _role() {
+    return this.message?.role ?? this.messageRole;
+  }
+  get _content() {
+    return this.message?.content ?? this.content;
+  }
+  get _log() {
+    return (this.message?.role === "assistant" ? this.message?.log : void 0) ?? this.log;
+  }
+  get _error() {
+    return (this.message?.role === "assistant" ? this.message?.error : void 0) ?? this.error;
+  }
+  get _feedback() {
+    return this.message?.role === "assistant" ? this.message?.feedback?.positive : void 0;
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      g(() => this._showLog, () => this._scrollToEnd())
+    ]);
+  }
+  _scrollToEnd() {
+    requestAnimationFrame(() => {
+      this._endRef.value?.scrollIntoView({ behavior: "smooth", block: "end" });
+    });
+  }
+  _handleFeedback(t) {
+    this.message?.role === "assistant" && (this.message.feedback = this.message.feedback?.positive === t ? void 0 : { positive: t }, this.arcgisFeedback.emit(this.message), this.requestUpdate());
   }
   _renderLog() {
-    return this.log && this._showLog ? t`<div class="assistant-chat-card__log-container"><pre class="assistant-chat-card__log">${this.log}</pre></div>` : null;
+    return this._log && this._showLog && this.logEnabled ? e`<div class="assistant-chat-card__log-container"><div class="assistant-chat-card__log"><calcite-accordion appearance=transparent icon-position=start icon-type=chevron scale=s>${this._log.map((t) => {
+      const a = t.includes(`
+`) || t.length > 70;
+      return e`<calcite-accordion-item .heading=${a ? `${t.substring(0, 70)}...` : t} .expanded=${a}><div class="assistant-chat-card__log-entry">${a ? r(h(t)) : null}</div></calcite-accordion-item>`;
+    })}</calcite-accordion></div></div>` : null;
   }
   _renderThumbsUpButton() {
-    return t`<calcite-action id=action-thumbs-up icon=thumbs-up scale=s appearance=transparent @click=${() => {
-    }} text></calcite-action><calcite-tooltip reference-element=action-thumbs-up overlay-positioning=fixed placement=bottom><span>${this._messages.thumbsUpLabel}</span></calcite-tooltip>`;
+    return e`<calcite-action id=action-thumbs-up icon=thumbs-up scale=s .active=${this._feedback === !0} @click=${() => this._handleFeedback(!0)} text></calcite-action><calcite-tooltip reference-element=action-thumbs-up overlay-positioning=fixed placement=bottom><span>${this._messages.thumbsUpLabel}</span></calcite-tooltip>`;
   }
   _renderThumbsDownButton() {
-    return t`<calcite-action id=action-thumbs-down icon=thumbs-down scale=s appearance=transparent @click=${() => {
-    }} text></calcite-action><calcite-tooltip reference-element=action-thumbs-down overlay-positioning=fixed placement=bottom><span>${this._messages.thumbsDownLabel}</span></calcite-tooltip>`;
+    return e`<calcite-action id=action-thumbs-down icon=thumbs-down scale=s .active=${this._feedback === !1} @click=${() => this._handleFeedback(!1)} text></calcite-action><calcite-tooltip reference-element=action-thumbs-down overlay-positioning=fixed placement=bottom><span>${this._messages.thumbsDownLabel}</span></calcite-tooltip>`;
   }
   _renderFeedback() {
-    return !this.feedbackDisabled && !this.error ? t`<div class="assistant-chat-card__feedback-actions">${this._renderThumbsUpButton()}${this._renderThumbsDownButton()}</div>` : null;
+    return this.feedbackEnabled && !this._error ? e`<div class="assistant-chat-card__feedback-actions">${this._renderThumbsUpButton()}${this._renderThumbsDownButton()}</div>` : null;
   }
   _renderCopyButton() {
-    return this.error ? null : t`<calcite-action id=action-copy icon=copy-to-clipboard scale=s appearance=transparent @click=${async () => {
+    return !this._error && this.copyEnabled ? e`<calcite-action id=action-copy icon=copy-to-clipboard scale=s @click=${async () => {
       try {
-        this.content && await navigator.clipboard.writeText(this.content);
-      } catch (a) {
-        console.error("Failed to copy text to clipboard:", a);
+        this._content && await navigator.clipboard.writeText(this._content);
+      } catch (t) {
+        console.error("Failed to copy text to clipboard:", t);
       }
-    }} text></calcite-action><calcite-tooltip reference-element=action-copy overlay-positioning=fixed placement=bottom><span>${this._messages.copyButtonLabel}</span></calcite-tooltip>`;
+    }} text></calcite-action><calcite-tooltip reference-element=action-copy overlay-positioning=fixed placement=bottom><span>${this._messages.copyButtonLabel}</span></calcite-tooltip>` : null;
   }
   _renderLogButton() {
-    return this.log ? t`<calcite-action id=action-log icon=access-string-results scale=s appearance=transparent @click=${() => this._showLog = !this._showLog} .text=${this._messages.logButtonLabel} .active=${this._showLog}></calcite-action><calcite-tooltip reference-element=action-log overlay-positioning=fixed placement=bottom><span>${this._messages.logButtonLabel}</span></calcite-tooltip>` : null;
+    return this._log && this.logEnabled ? e`<calcite-action id=action-log icon=access-string-results scale=s @click=${() => this._showLog = !this._showLog} .text=${this._messages.logButtonLabel} .active=${this._showLog}></calcite-action><calcite-tooltip reference-element=action-log overlay-positioning=fixed placement=bottom><span>${this._messages.logButtonLabel}</span></calcite-tooltip>` : null;
   }
   _renderFooter() {
-    return this.loading ? null : t`<div class="assistant-chat-card__footer"><slot name=footer-start class="assistant-chat-card__footer-start">${this._renderCopyButton()}${this._renderLogButton()}</slot>${this._renderFeedback()}</div>`;
+    return this.loading ? null : e`<div class="assistant-chat-card__footer"><div class="assistant-chat-card__footer-start">${this._renderCopyButton()}${this._renderLogButton()}<slot name=footer-actions-start></slot></div><div class="assistant-chat-card__footer-end"><slot name=footer-actions-end></slot>${this._renderFeedback()}</div></div>`;
   }
   render() {
-    return this.type === "prompt" ? t`<div class="assistant-chat-card__prompt-container"><div>${this.content}</div><div class="assistant-chat-card__prompt-avatar"><calcite-avatar .fullName=${this.user} scale=s></calcite-avatar></div></div>` : t`<div class="assistant-chat-card__response-container"><calcite-icon icon=effects class="assistant-chat-card__response-icon"></calcite-icon><div class="assistant-chat-card__content-container"><arcgis-assistant-chat-card-content .loading=${this.loading} .loadingMessage=${this.loadingMessage} .type=${this.error ? "error" : "text"} .content=${this.error ?? this.content}></arcgis-assistant-chat-card-content>${this._renderLog()}${this._renderFooter()}</div></div>`;
+    return this._role === "user" ? e`<div class="assistant-chat-card__prompt-container"><div>${this._content}</div><div class="assistant-chat-card__prompt-avatar"><calcite-avatar .fullName=${this.user} scale=s></calcite-avatar></div></div>` : e`<div class="assistant-chat-card__response-container"><calcite-icon icon=effects class="assistant-chat-card__response-icon" scale=s></calcite-icon><div class="assistant-chat-card__content-container"><arcgis-assistant-chat-card-content .loading=${this.loading} .loadingMessage=${this.loadingMessage} .type=${this._error ? "error" : "text"} .content=${this._error ?? this._content}></arcgis-assistant-chat-card-content>${this._renderLog()}${this._renderFooter()}</div><div ${d(this._endRef)}></div></div>`;
   }
 }
-e("arcgis-assistant-chat-card", r);
+s("arcgis-assistant-chat-card", _);
 export {
-  r as ArcgisAssistantChatCard
+  _ as ArcgisAssistantChatCard
 };

package/dist/components/arcgis-assistant-chat-card/index.js

@@ -1,3 +1,5 @@
+import "@esri/calcite-components/components/calcite-accordion";
+import "@esri/calcite-components/components/calcite-accordion-item";
 import "@esri/calcite-components/components/calcite-action";
 import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-avatar";

package/dist/components/arcgis-assistant-chat-card-content/customElement.js

@@ -1,13 +1,15 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as n } from "../../chunks/runtime.js";
-import { css as i, html as t } from "lit";
-import { LitElement as o, safeClassMap as e } from "@arcgis/lumina";
-const r = i`.assistant-chat-card-content__skeleton-block{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);width:100%}.assistant-chat-card-content__skeleton-text{display:block;height:.95em;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--calcite-color-foreground-2) 65%,transparent),color-mix(in srgb,var(--calcite-color-foreground-3) 85%,transparent),color-mix(in srgb,var(--calcite-color-foreground-2) 65%,transparent));background-size:200% 100%;animation:assistant-chat-card-content-shimmer 1.2s ease-in-out infinite;width:85%}.assistant-chat-card-content__skeleton-text:last-child{width:70%}@keyframes assistant-chat-card-content-shimmer{0%{background-position:-150% 0}to{background-position:150% 0}}@media(prefers-reduced-motion){.assistant-chat-card-content__skeleton-text{animation:none}}.assistant-chat-card-content__text-container{padding:var(--calcite-spacing-sm);display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);color:var(--calcite-color-text-1)}.assistant-chat-card-content__text-loading{font-style:italic;word-wrap:break-word;word-break:break-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.assistant-chat-card-content__error-notice{padding:var(--calcite-spacing-sm)}`, s = "assistant-chat-card-content", a = {
-  textLoading: `${s}__text-loading`,
-  skeletonBlock: `${s}__skeleton-block`,
-  skeletonText: `${s}__skeleton-text`
+import { c as s } from "../../chunks/runtime.js";
+import { css as c, html as t } from "lit";
+import { LitElement as i, safeClassMap as a } from "@arcgis/lumina";
+import { unsafeHTML as r } from "lit/directives/unsafe-html.js";
+import { p as o } from "../../chunks/converterUtils.js";
+const l = c`.assistant-chat-card-content__skeleton-block{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);width:100%}.assistant-chat-card-content__skeleton-text{display:block;height:.95em;border-radius:var(--calcite-border-radius);background:linear-gradient(90deg,color-mix(in srgb,var(--calcite-color-foreground-2) 65%,transparent),color-mix(in srgb,var(--calcite-color-foreground-3) 85%,transparent),color-mix(in srgb,var(--calcite-color-foreground-2) 65%,transparent));background-size:200% 100%;animation:assistant-chat-card-content-shimmer 1.2s ease-in-out infinite;width:85%}.assistant-chat-card-content__skeleton-text:last-child{width:70%}@keyframes assistant-chat-card-content-shimmer{0%{background-position:-150% 0}to{background-position:150% 0}}@media(prefers-reduced-motion){.assistant-chat-card-content__skeleton-text{animation:none}}.assistant-chat-card-content__text-container{padding:0 var(--calcite-spacing-sm);display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);color:var(--calcite-color-text-1)}.assistant-chat-card-content__text-container pre{background-color:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-sm);border-radius:var(--calcite-border-radius);color:var(--calcite-color-text-1);direction:ltr;max-width:100%;overflow:auto}.assistant-chat-card-content__text-container pre code{display:block;white-space:pre;font-family:var(--calcite-code-family)}.assistant-chat-card-content__loading-container{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm)}.assistant-chat-card-content__loading{display:flex;align-items:center;gap:var(--calcite-spacing-sm)}.assistant-chat-card-content__text-loading{font-style:italic;word-wrap:break-word;word-break:break-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical}.assistant-chat-card-content__error-notice{padding:var(--calcite-spacing-sm)}`, n = "assistant-chat-card-content", e = {
+  textLoading: `${n}__text-loading`,
+  skeletonBlock: `${n}__skeleton-block`,
+  skeletonText: `${n}__skeleton-text`
 };
-class c extends o {
+class d extends i {
   constructor() {
     super(...arguments), this.loading = !1, this.type = "text";
   }
@@ -15,10 +17,10 @@ class c extends o {
     this.properties = { loading: 5, type: 1, content: 1, loadingMessage: 1 };
   }
   static {
-    this.styles = r;
+    this.styles = l;
   }
   _renderText() {
-    return t`<div class="assistant-chat-card-content__text-container"><div><span class=${e(this.loading ? a.textLoading : void 0)}>${this.loading ? this.loadingMessage : this.content}</span></div>${this.loading ? t`<div class=${e(a.skeletonBlock)}><span class=${e(a.skeletonText)}></span><span class=${e(a.skeletonText)}></span></div>` : null}</div>`;
+    return t`<div class="assistant-chat-card-content__text-container">${this.loading ? t`<div class="assistant-chat-card-content__loading-container"><div class="assistant-chat-card-content__loading"><calcite-loader label=loading inline></calcite-loader><div class=${a(e.textLoading)}>${this.loadingMessage}</div></div><div class=${a(e.skeletonBlock)}><span class=${a(e.skeletonText)}></span><span class=${a(e.skeletonText)}></span></div></div>` : t`<div>${r(o(this.content))}</div>`}</div>`;
   }
   _renderError() {
     return t`<calcite-notice class="assistant-chat-card-content__error-notice" open icon kind=warning width=auto><div slot=message>${this.content}</div></calcite-notice>`;
@@ -34,7 +36,7 @@ class c extends o {
     }
   }
 }
-n("arcgis-assistant-chat-card-content", c);
+s("arcgis-assistant-chat-card-content", d);
 export {
-  c as ArcgisAssistantChatCardContent
+  d as ArcgisAssistantChatCardContent
 };

package/dist/components/arcgis-assistant-chat-card-content/index.js

@@ -1,2 +1,3 @@
+import "@esri/calcite-components/components/calcite-loader";
 import "@esri/calcite-components/components/calcite-notice";
 export * from "./customElement.js";

package/dist/components/arcgis-assistant-chat-entry/customElement.d.ts

@@ -1,5 +1,7 @@
 /// <reference path="../../index.d.ts" />
+import type Collection from "@arcgis/core/core/Collection.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ChatMessage } from "../arcgis-assistant/types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /** @internal */
@@ -16,11 +18,12 @@ export abstract class ArcgisAssistantChatEntry extends LitElement {
   }>;
   /** @default false */
   accessor awaitingResponse: boolean;
-  /** @default true */
-  accessor enterKeySubmits: boolean;
   accessor entryPlaceholder: string | undefined;
   /** @default "" */
   accessor inputValue: string;
+  /** @default false */
+  accessor keyboardShortcutsDisabled: boolean;
+  accessor messages: Collection<ChatMessage>;
   accessor status: "error" | "ready" | "working" | undefined;
   readonly arcgisCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly arcgisSubmit: import("@arcgis/lumina").TargetedEvent<this, string>;

package/dist/components/arcgis-assistant-chat-entry/customElement.js

@@ -1,26 +1,32 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as e } from "../../chunks/runtime.js";
-import { css as i, html as s } from "lit";
-import { LitElement as r, createEvent as a, nothing as n } from "@arcgis/lumina";
-import { createRef as c, ref as o } from "lit/directives/ref.js";
-import { watch as l } from "@arcgis/core/core/reactiveUtils.js";
-import { u } from "../../chunks/useT9n.js";
-const h = i`.assistant-chat-entry__input-container{display:flex;flex-direction:column}.assistant-chat-entry__footer-start{display:flex;gap:var(--calcite-spacing-md);flex-wrap:wrap;align-items:center}.assistant-chat-entry__footer-end{display:flex;gap:var(--calcite-spacing-md);align-items:center}.assistant-chat-entry__status-indicator{width:9px;height:9px;border-radius:100%;background-color:var(--calcite-color-status-success)}.assistant-chat-entry__status-indicator[data-status=working]{background-color:var(--calcite-color-status-warning)}.assistant-chat-entry__status-indicator[data-status=error]{background-color:var(--calcite-color-status-danger)}.assistant-chat-entry__status-text{text-transform:capitalize}`;
-class d extends r {
+import { c as u } from "../../chunks/runtime.js";
+import { css as h, html as l } from "lit";
+import { LitElement as d, createEvent as c, nothing as p } from "@arcgis/lumina";
+import { createRef as f, ref as g } from "lit/directives/ref.js";
+import { watch as m } from "@arcgis/core/core/reactiveUtils.js";
+import { u as y } from "../../chunks/useT9n.js";
+import _ from "@arcgis/core/core/Collection.js";
+const v = h`.assistant-chat-entry__input-container{display:flex;flex-direction:column}.assistant-chat-entry__footer-start{display:flex;gap:var(--calcite-spacing-md);flex-wrap:wrap;align-items:center}.assistant-chat-entry__footer-end{display:flex;gap:var(--calcite-spacing-md);align-items:center}.assistant-chat-entry__status-indicator{width:9px;height:9px;border-radius:100%;background-color:var(--calcite-color-status-success)}.assistant-chat-entry__status-indicator[data-status=working]{background-color:var(--calcite-color-status-warning)}.assistant-chat-entry__status-indicator[data-status=error]{background-color:var(--calcite-color-status-danger)}.assistant-chat-entry__status-text{text-transform:capitalize}`;
+class w extends d {
   constructor() {
-    super(...arguments), this.#t = c(), this._messages = u({ blocking: !0 }), this.enterKeySubmits = !0, this.awaitingResponse = !1, this.inputValue = "", this.arcgisCancel = a(), this.arcgisSubmit = a();
+    super(...arguments), this.#s = f(), this.#t = -1, this.#e = "", this._messages = y({ blocking: !0 }), this.keyboardShortcutsDisabled = !1, this.awaitingResponse = !1, this.inputValue = "", this.messages = new _([]), this.arcgisCancel = c(), this.arcgisSubmit = c();
   }
   static {
-    this.properties = { enterKeySubmits: 5, entryPlaceholder: 1, awaitingResponse: 5, inputValue: 1, status: 1 };
+    this.properties = { _userMessages: 16, keyboardShortcutsDisabled: 5, entryPlaceholder: 1, awaitingResponse: 5, inputValue: 1, status: 1, messages: 0 };
   }
   static {
-    this.styles = h;
+    this.styles = v;
   }
+  #s;
   #t;
+  #e;
+  get _userMessages() {
+    return this.messages.toArray().filter((t) => t.role === "user").map(({ content: t }) => t);
+  }
   loaded() {
     this.manager.onLifecycle(() => [
-      l(() => this.inputValue, (t) => {
-        this.#t.value && (this.#t.value.value = t);
+      m(() => this.inputValue, (t) => {
+        this.#s.value && (this.#s.value.value = t);
       }, { initial: !0 })
     ]);
   }
@@ -29,16 +35,32 @@ class d extends r {
       this.arcgisCancel.emit();
       return;
     }
-    const t = this.#t.value?.value.trim();
-    t && (this.arcgisSubmit.emit(t), this.#t.value && (this.#t.value.value = "", await this.#t.value.setFocus()));
+    const t = this.#s.value?.value.trim();
+    t && (this.arcgisSubmit.emit(t), this.#t = -1, this.#e = "", this.#s.value && (this.#s.value.value = "", await this.#s.value.setFocus()));
+  }
+  async _navigateHistory(t, i) {
+    const s = this.#s.value;
+    if (!s)
+      return;
+    const e = this._userMessages;
+    if (e.length === 0)
+      return;
+    const r = s.value ?? "", n = s.shadowRoot?.querySelector("textarea"), a = n?.selectionStart, o = n?.selectionEnd;
+    if (!(a == null || o == null) && !(a !== o || t === "up" && a !== 0 || t === "down" && a !== r.length)) {
+      if (t === "up") {
+        this.#t === -1 ? (this.#e = r, this.#t = e.length - 1) : this.#t = Math.max(0, this.#t - 1), s.value = e[this.#t] ?? "", i.preventDefault();
+        return;
+      }
+      this.#t !== -1 && (this.#t < e.length - 1 ? (this.#t += 1, s.value = e[this.#t] ?? "") : (this.#t = -1, s.value = this.#e), i.preventDefault());
+    }
   }
   render() {
-    return s`<div class="assistant-chat-entry__input-container"><calcite-text-area .value=${this.#t.value?.value} .placeholder=${this.entryPlaceholder ?? this._messages.entryPlaceholder} @keydown=${async (t) => {
-      t.key === "Enter" && !t.shiftKey && this.enterKeySubmits && (t.preventDefault(), await this._submitMessage());
-    }} ${o(this.#t)}><div slot=footer-start class="assistant-chat-entry__footer-start"><slot name=entry-actions-start></slot></div><div slot=footer-end class="assistant-chat-entry__footer-end">${this.status ? s`<div id=tooltip-status class="assistant-chat-entry__status-indicator" data-status=${this.status ?? n}></div><calcite-tooltip reference-element=tooltip-status offset-distance=12><span class="assistant-chat-entry__status-text">${this.status}</span></calcite-tooltip>` : null}<calcite-button .iconStart=${this.awaitingResponse ? "circle-stop" : "send"} slot=footer-end round @click=${() => void this._submitMessage()}>${this.awaitingResponse ? this._messages.stopButtonLabel : this._messages.askButtonLabel}</calcite-button></div></calcite-text-area></div>`;
+    return l`<div class="assistant-chat-entry__input-container"><calcite-text-area .value=${this.#s.value?.value} .placeholder=${this.entryPlaceholder ?? this._messages.entryPlaceholder} resize=vertical @keydown=${async (t) => {
+      t.altKey || t.ctrlKey || t.metaKey || t.shiftKey || this.keyboardShortcutsDisabled || (t.key === "Enter" ? (t.preventDefault(), await this._submitMessage()) : t.key === "ArrowUp" ? await this._navigateHistory("up", t) : t.key === "ArrowDown" && await this._navigateHistory("down", t));
+    }} ${g(this.#s)}><div slot=footer-start class="assistant-chat-entry__footer-start"><slot name=entry-actions-start></slot></div><div slot=footer-end class="assistant-chat-entry__footer-end">${this.status ? l`<div id=tooltip-status class="assistant-chat-entry__status-indicator" data-status=${this.status ?? p}></div><calcite-tooltip reference-element=tooltip-status offset-distance=12><span class="assistant-chat-entry__status-text">${this.status}</span></calcite-tooltip>` : null}<calcite-button .iconStart=${this.awaitingResponse ? "circle-stop" : "send"} slot=footer-end round @click=${() => void this._submitMessage()}>${this.awaitingResponse ? this._messages.stopButtonLabel : this._messages.askButtonLabel}</calcite-button></div></calcite-text-area></div>`;
   }
 }
-e("arcgis-assistant-chat-entry", d);
+u("arcgis-assistant-chat-entry", w);
 export {
-  d as ArcgisAssistantChatEntry
+  w as ArcgisAssistantChatEntry
 };

package/dist/components/arcgis-assistant-data-exploration-agent/customElement.d.ts

@@ -3,14 +3,23 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisMap as ArcgisMap } from "@arcgis/map-components/components/arcgis-map";
 
 /**
- * The Data Exploration Agent component enables the end user to query features, statistics, and spatial proximity
- * of layer within a provided web map. Currently, this is only scoped to querying feature layers within
- * a 2D web map.
+ * The Data Exploration Agent enables the end user to query features, statistics, and spatial proximity
+ * to features in a layer within a web map. Currently, this is only scoped to querying feature layers within
+ * a 2D web map. See the list of capabilities below for more details.
+ *
+ * The data exploration agent is designed to answer questions about the data in the map, and does not have
+ * access to external data sources or the user's location. It also cannot create visualizations in the form of charts,
+ * layer renderers, new maps, or other visual outputs. It can currently only provide answers in text form based on the
+ * data in the map.
+ *
+ * This agent can change the state of the map by filtering features in a layer, but it cannot change the symbology of
+ * features or create new layers or export results of a query to a file or external source.
  *
  * This is an unrendered component that must be added as a child of the `arcgis-assistant` component in either HTML or JavaScript.
  *
  * ```html
- * <arcgis-assistant>
+ * <arcgis-map id="my-map"></arcgis-map>
+ * <arcgis-assistant reference-element="my-map">
  *   <arcgis-assistant-data-exploration-agent></arcgis-assistant-data-exploration-agent>
  * </arcgis-assistant>
  * ```
@@ -21,14 +30,72 @@ import type { ArcgisMap as ArcgisMap } from "@arcgis/map-components/components/a
  * assistant.appendChild(dataExplorationAgent);
  * ```
  *
+ * Once added to the assistant, the agent is loaded and ready to receive user messages related to data exploration.
+ *
+ * ### Capabilities
+ *
+ * The data exploration agent provides the following capabilities related to exploring data in the map:
+ *
+ * - **Query features** - Ask about the attributes of features in a layer, including a single feature or a set
+ *   of features.
+ * - **Query statistics** - Ask about statistics related to features in a layer. Statistics that can be queried
+ *   include count, average, minimum, maximum, and sum. This includes asking about the top number of features based on a
+ *   particular attribute.
+ * - **Query spatial proximity** - Ask about the spatial proximity of features in a layer, such as
+ *   the number of features that intersect a polygon, or information about features within a distance of a specified location or feature.
+ *   This currently does not include questions about the closest feature, but this is planned to be included in a future release.
+ * - **Filter features** - Users can ask the agent to show a subset of features that filter by attributes, or spatial
+ *   proximity to other features. This includes asking the agent to show features that intersect a particular area,
+ *   or are within a certain distance of a location or feature.
+ *
+ * ### Example questions
+ *
+ * The following are example questions a user can ask within the bounds of the data exploration agent.
+ * These questions assume a map with layers that include cities, states, and rivers.
+ *
+ * - "What is the city with the largest population?"
+ * - "How does that population compare to the average population of the cities in this map?"
+ * - "How many cities are within 30 miles of the Colorado River?"
+ * - "Show all cities in the state of California."
+ * - "List the top 5 rivers by length."
+ * - "Emphasize the largest river on the map."
+ *
+ * The following are examples of the types of questions that fall outside the bounds of the
+ * data exploration agent and should therefore be avoided:
+ *
+ * - "What is the closest restaurant to me?" (the data exploration agent does not have access to the user's location,
+ * nor can it find the nearest feature from a location)
+ * - "What is the projected growth of Phoenix in the next 10 years?" (the data exploration agent can
+ * only answer questions about the data in the map, not external data or projections)
+ * - "Show me the population of cities in this map on a graph." (the data exploration agent can only
+ * provide answers in text form, not visualizations)
+ *
+ * > Due to the non-deterministic nature of generative AI, there may be inaccuracies or unexpected behavior when using the
+ * out-of-the-box agents.
+ *
  * @since 5.0
  * @beta
  * @see [arcgis-assistant](https://developers.arcgis.com/javascript/latest/references/ai-components/components/arcgis-assistant/)
+ * @see [Intro to building agentic mapping applications](https://developers.arcgis.com/javascript/latest/agentic-apps/ai-introduction/)
+ * @see [AI Assistant component sample](https://developers.arcgis.com/javascript/latest/sample-code/ai-assistant/)
  */
 export abstract class ArcgisAssistantDataExplorationAgent extends LitElement {
   /**
-   * A reference to the map element or its ID string used to resolve the MapView for this agent.
-   * If not provided, the agent will attempt to find the closest parent `arcgis-map` element.
+   * The reference element to the map that provides context for the data exploration agent. Currently,
+   * this is only scoped to `arcgis-map` elements. This provides the data exploration agent with the layers
+   * needed for answering user questions about the data in the map.
+   *
+   * Setting this property is not necessary if you set the reference element on the parent
+   * `arcgis-assistant` component.
+   *
+   * @see [arcgis-assistant.referenceElement](https://developers.arcgis.com/javascript/latest/references/ai-components/components/arcgis-assistant/#referenceElement)
+   * @example
+   * ```html
+   * <arcgis-map id="my-map"></arcgis-map>
+   * <arcgis-assistant>
+   *   <arcgis-assistant-data-exploration-agent reference-element="my-map"></arcgis-assistant-data-exploration-agent>
+   * </arcgis-assistant>
+   * ```
    */
   accessor referenceElement: ArcgisMap | string | undefined;
 }

package/dist/components/arcgis-assistant-data-exploration-agent/customElement.js

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as t } from "../../chunks/runtime.js";
 import { LitElement as a } from "@arcgis/lumina";
-import { DataExplorationAgent as s } from "@arcgis/ai-agents";
-import { r as e, i } from "../../chunks/utils.js";
+import { DataExplorationAgent as e } from "@arcgis/ai-agents";
+import { r as s, a as i } from "../../chunks/utils.js";
 class r extends a {
   constructor() {
-    super(...arguments), this.agent = s;
+    super(...arguments), this.agent = e;
   }
   static {
     this.properties = { referenceElement: 1 };
@@ -16,8 +16,8 @@ class r extends a {
       throw new Error("arcgis-assistant-data-exploration-agent requires a mapView");
     return { mapView: this.#t };
   }
-  async load() {
-    this.#t = await e(this, "arcgis-assistant-data-exploration-agent"), i(this);
+  load() {
+    this.#t = s(this, "arcgis-assistant-data-exploration-agent"), i(this);
   }
 }
 t("arcgis-assistant-data-exploration-agent", r);