@arcgis/ai-components 5.2.0-next.1 → 5.2.0-next.11

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

@@ -1,14 +1,13 @@
-import "../arcgis-assistant-interrupt/index.js";
 import "@esri/calcite-components/components/calcite-notice";
 import "@esri/calcite-components/components/calcite-link";
-import "../arcgis-assistant-suggested-prompts/index.js";
 import "@esri/calcite-components/components/calcite-panel";
 import "../arcgis-assistant-chat/index.js";
 import "../arcgis-assistant-message/index.js";
-import "../arcgis-assistant-message-text/index.js";
 import "../arcgis-assistant-message-block/index.js";
 import "../arcgis-assistant-user-message/index.js";
 import "../arcgis-assistant-message-loading/index.js";
+import "../arcgis-assistant-interrupt/index.js";
+import "../arcgis-assistant-suggested-prompts/index.js";
 import "../arcgis-assistant-chat-entry/index.js";
 import "@esri/calcite-components/components/calcite-button";
 export * from "./customElement.js";

package/dist/components/arcgis-assistant/types.d.ts

@@ -51,7 +51,7 @@ export interface AssistantMessage extends ChatMessageBase {
    * UI elements separate from the plain text transcript and can be used to display actions, follow-up prompts,
    * or app-registered custom content.
    */
-  blocks?: UXSuggestion[];
+  blocks?: (UXSuggestion & { isPending?: boolean; })[];
   /**
    * Log messages related to the assistant's processing of the user's request. This can include information about
    * the agents or tools it invoked, the parameters generated by the LLM, and any relevant details about how it
@@ -71,6 +71,19 @@ export interface AssistantMessage extends ChatMessageBase {
    * performance over time.
    */
   feedback?: Feedback;
+  /**
+   * Indicates whether the message content is still being streamed from the assistant. This can be used to show loading
+   * indicators or placeholders in the UI until the full content is received.
+   */
+  isStreaming?: boolean;
+  /**
+   * An array of interrupts emitted by the assistant during the processing of the user's request. Each interrupt includes
+   * details about the type of interrupt, the message to display to the user, and any options for user input.
+   */
+  interrupts?: {
+      interrupt: Interrupt;
+      response?: string[] | boolean | string;
+  }[];
 }
 
 /**

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

@@ -1,10 +1,16 @@
 /// <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 { ChatMessage, Interrupt } from "../arcgis-assistant/types.js";
 
-/** @internal */
+/**
+ * Wraps and renders the conversation area. Use it as the container for message list content.
+ * Offers chat-level layout structure for message starter, message list, and loading regions.
+ *
+ * @internal
+ */
 export abstract class ArcgisAssistantChat extends LitElement {
+  accessor interrupt: Interrupt | null;
   /** @default false */
   accessor loading: boolean;
   accessor messages: Collection<ChatMessage>;

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

@@ -4,17 +4,17 @@ import { css as e, html as t } from "lit";
 import { LitElement as i } from "@arcgis/lumina";
 import { createRef as a, ref as o } from "lit/directives/ref.js";
 import l from "@arcgis/core/core/Collection.js";
-import { watch as r } from "@arcgis/core/core/reactiveUtils.js";
-const n = e`.messages-container{display:flex;flex:1;flex-direction:column}.messages-list{padding:var(--calcite-spacing-lg);display:flex;flex-direction:column;gap:var(--calcite-spacing-xxl);flex:1 1 auto;min-height:0;justify-content:flex-end;overflow:auto}`;
+import { watch as n } from "@arcgis/core/core/reactiveUtils.js";
+const r = e`.messages-container{display:flex;flex:1;flex-direction:column;line-height:var(--calcite-font-line-height-relative-snug)}.messages-list{padding:var(--calcite-spacing-lg);display:flex;flex-direction:column;gap:var(--calcite-spacing-xxl);flex:1 1 auto;min-height:0;justify-content:flex-end;overflow:auto}`;
 class c extends i {
   constructor() {
-    super(...arguments), this.#s = a(), this.loading = !1, this.messages = new l([]);
+    super(...arguments), this.#s = a(), this.loading = !1, this.messages = new l([]), this.interrupt = null;
   }
   static {
-    this.properties = { loading: 5, messages: 0 };
+    this.properties = { loading: 5, messages: 0, interrupt: 0 };
   }
   static {
-    this.styles = n;
+    this.styles = r;
   }
   #s;
   firstUpdated() {
@@ -23,9 +23,9 @@ class c extends i {
   loaded() {
     this.manager.onLifecycle(() => [
       this.messages.on("change", () => {
-        this.requestUpdate(), this._scrollToEnd();
+        this._scrollToEnd();
       }),
-      r(() => this.loading, () => {
+      n(() => [this.loading, this.interrupt], () => {
         this._scrollToEnd();
       })
     ]);

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

@@ -5,7 +5,8 @@ import type { ChatMessage } from "../arcgis-assistant/types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
- * An input bar primitive for collecting assistant prompts.
+ * Provides the input bar and submit or cancel behavior. Use it to collect prompts and emit submit events.
+ * Offers keyboard submit/history behavior, entry action slots, and optional voice-input integration.
  *
  * @slot [entry-actions-start] - Slot for adding actions to the start of the entry area.
  * @slot [entry-actions-end] - Slot for adding actions to the end of the entry area.
@@ -15,6 +16,8 @@ export abstract class ArcgisAssistantChatEntry extends LitElement {
   protected _messages: { entryPlaceholder: string; } & T9nMeta<{ entryPlaceholder: string; }>;
   /** @default false */
   accessor awaitingResponse: boolean;
+  /** @default false */
+  accessor disabled: boolean;
   accessor entryPlaceholder: string | undefined;
   /** @default "" */
   accessor inputValue: string;

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

@@ -1,27 +1,28 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as p } from "../../chunks/runtime.js";
-import { css as d, html as l } from "lit";
-import { LitElement as g, createEvent as u } from "@arcgis/lumina";
-import { createRef as c, ref as h } from "lit/directives/ref.js";
-import { u as f } from "../../chunks/useT9n.js";
-import m from "@arcgis/core/core/Collection.js";
-const y = d`.input-container{display:flex;flex-direction:column}.footer-start{display:flex;gap:var(--calcite-spacing-md);flex-wrap:wrap;align-items:center}.footer-end{display:flex;gap:var(--calcite-spacing-md);align-items:center}.status-indicator{width:9px;height:9px;border-radius:100%;background-color:var(--calcite-color-status-success)}.status-indicator[data-status=working]{background-color:var(--calcite-color-status-warning)}.status-indicator[data-status=error]{background-color:var(--calcite-color-status-danger)}.status-text{text-transform:capitalize}`;
-class v extends g {
+import { c as d } from "../../chunks/runtime.js";
+import { css as p, html as c } from "lit";
+import { LitElement as f, createEvent as l, safeClassMap as g } from "@arcgis/lumina";
+import { createRef as u, ref as h } from "lit/directives/ref.js";
+import { u as m } from "../../chunks/useT9n.js";
+import y from "@arcgis/core/core/Collection.js";
+import { classes as v } from "@arcgis/toolkit/dom";
+const b = p`:host{--calcite-text-area-border-color: var(--calcite-color-border-1);--calcite-text-area-divider-color: var(--calcite-color-border-1);--calcite-text-area-corner-radius: var(--calcite-border-radius)}.input-container{display:flex;flex-direction:column}.footer-start{display:flex;gap:var(--calcite-spacing-md);flex-wrap:wrap;align-items:center}.footer-end{display:flex;gap:var(--calcite-spacing-md);align-items:center}.status-indicator{width:9px;height:9px;border-radius:100%;background-color:var(--calcite-color-status-success)}.status-indicator[data-status=working]{background-color:var(--calcite-color-status-warning)}.status-indicator[data-status=error]{background-color:var(--calcite-color-status-danger)}.status-text{text-transform:capitalize}.focused{--calcite-text-area-shadow: var(--calcite-shadow-sm)}`;
+class w extends f {
   constructor() {
-    super(...arguments), this.#s = c(), this.#i = c(), this.#t = -1, this.#e = "", this.#a = (t) => {
+    super(...arguments), this.#s = u(), this.#i = u(), this.#t = -1, this.#e = "", this.#a = (t) => {
       t.stopPropagation();
       const s = t.detail;
       this._setDraftValue(s.value), s.focusInput && this.#s.value && this.#s.value.setFocus();
     }, this.#r = (t) => {
       const s = t.target.value ?? "";
       this.inputValue = s, this.#e = s;
-    }, this._messages = f({ blocking: !0 }), this.keyboardShortcutsDisabled = !1, this.awaitingResponse = !1, this.inputValue = "", this.voiceInputEnabled = !1, this.messages = new m([]), this.arcgisCancel = u(), this.arcgisSubmit = u();
+    }, this._messages = m({ blocking: !0 }), this._inFocus = !1, this.keyboardShortcutsDisabled = !1, this.awaitingResponse = !1, this.inputValue = "", this.voiceInputEnabled = !1, this.messages = new y([]), this.disabled = !1, this.arcgisCancel = l(), this.arcgisSubmit = l();
   }
   static {
-    this.properties = { _userMessages: 16, keyboardShortcutsDisabled: 5, entryPlaceholder: 1, awaitingResponse: 5, inputValue: 1, status: 1, voiceInputEnabled: 5, messages: 0 };
+    this.properties = { _inFocus: 16, _userMessages: 16, keyboardShortcutsDisabled: 5, entryPlaceholder: 1, awaitingResponse: 5, inputValue: 1, status: 1, voiceInputEnabled: 5, messages: 0, disabled: 5 };
   }
   static {
-    this.styles = y;
+    this.styles = b;
   }
   #s;
   #i;
@@ -54,8 +55,8 @@ class v extends g {
     const e = this._userMessages;
     if (e.length === 0)
       return;
-    const r = a.value ?? "", n = a.shadowRoot?.querySelector("textarea"), i = n?.selectionStart, o = n?.selectionEnd;
-    if (!(i == null || o == null) && !(i !== o || t === "up" && i !== 0 || t === "down" && i !== r.length)) {
+    const r = a.value ?? "", o = a.shadowRoot?.querySelector("textarea"), i = o?.selectionStart, n = o?.selectionEnd;
+    if (!(i == null || n == null) && !(i !== n || t === "up" && i !== 0 || t === "down" && i !== r.length)) {
       if (t === "up") {
         this.#t === -1 ? (this.#e = r, this.#t = e.length - 1) : this.#t = Math.max(0, this.#t - 1), this.inputValue = e[this.#t] ?? "", s.preventDefault();
         return;
@@ -66,13 +67,19 @@ class v extends g {
   _setDraftValue(t) {
     this.inputValue = t, this.#t = -1, this.#e = t;
   }
+  _onFocusIn() {
+    this._inFocus = !0;
+  }
+  _onFocusOut() {
+    this._inFocus = !1;
+  }
   render() {
-    return l`<div class="input-container"><calcite-text-area .value=${this.inputValue} .placeholder=${this.entryPlaceholder ?? this._messages.entryPlaceholder} resize=vertical @calciteTextAreaInput=${this.#r} @keydown=${async (t) => {
+    return c`<div class="input-container"><calcite-text-area class=${g(v({ focused: this._inFocus }))} .value=${this.inputValue} .placeholder=${this.entryPlaceholder ?? this._messages.entryPlaceholder} resize=vertical @calciteTextAreaInput=${this.#r} .disabled=${this.disabled} @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));
-    }} ${h(this.#s)}><div slot=footer-start class="footer-start"><slot name=entry-actions-start></slot></div><div slot=footer-end class="footer-end">${this.voiceInputEnabled ? l`<arcgis-assistant-speech-input .awaitingResponse=${this.awaitingResponse} .inputValue=${this.inputValue} ${h(this.#i)}></arcgis-assistant-speech-input>` : null}<slot name=entry-actions-end></slot></div></calcite-text-area></div>`;
+    }} @focusin=${this._onFocusIn} @focusout=${this._onFocusOut} ${h(this.#s)}><div slot=footer-start class="footer-start"><slot name=entry-actions-start></slot></div><div slot=footer-end class="footer-end">${this.voiceInputEnabled ? c`<arcgis-assistant-speech-input .awaitingResponse=${this.awaitingResponse} .inputValue=${this.inputValue} ${h(this.#i)}></arcgis-assistant-speech-input>` : null}<slot name=entry-actions-end></slot></div></calcite-text-area></div>`;
   }
 }
-p("arcgis-assistant-chat-entry", v);
+d("arcgis-assistant-chat-entry", w);
 export {
-  v as ArcgisAssistantChatEntry
+  w as ArcgisAssistantChatEntry
 };

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

@@ -9,6 +9,7 @@ import "../../chunks/generateLayerDescriptions.js";
 import "@langchain/core/messages";
 import "@langchain/core/callbacks/dispatch/web";
 import "@langchain/openai";
+import "@arcgis/core/config.js";
 import "@arcgis/core/core/reactiveUtils.js";
 import "@arcgis/core/layers/FeatureLayer.js";
 import "@arcgis/core/request.js";

package/dist/components/arcgis-assistant-help-agent/customElement.js

@@ -9,6 +9,7 @@ import "../../chunks/generateLayerDescriptions.js";
 import "@langchain/core/messages";
 import "@langchain/core/callbacks/dispatch/web";
 import "@langchain/openai";
+import "@arcgis/core/config.js";
 import "@arcgis/core/core/reactiveUtils.js";
 import "@arcgis/core/layers/FeatureLayer.js";
 import "@arcgis/core/request.js";

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

@@ -2,7 +2,10 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
-/** @internal */
+/**
+ * Renders interrupt prompts for extra user input. Use it when an agent pauses for confirmation, choice, or text input.
+ * Offers interrupt-specific input modes and submit or cancel event handling.
+ */
 export abstract class ArcgisAssistantInterrupt extends LitElement {
   /** @internal */
   protected _messages: {

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

@@ -1,22 +1,26 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as a } from "../../chunks/runtime.js";
-import { html as e } from "lit";
-import { LitElement as c, createEvent as s } from "@arcgis/lumina";
-import { u as l } from "../../chunks/useT9n.js";
-class n extends c {
+import { css as c, html as e } from "lit";
+import { LitElement as l, createEvent as i } from "@arcgis/lumina";
+import { u as r } from "../../chunks/useT9n.js";
+const n = c`:host{width:100%;padding:var(--calcite-spacing-md);background:var(--calcite-panel-background-color, var(--calcite-color-background))}calcite-panel{border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));border:0 solid var(--calcite-color-brand);border-block-start-width:4px;box-shadow:var(--calcite-shadow-md);width:100%;--calcite-panel-border-color: none}.interrupt-content{padding:0 var(--calcite-spacing-md);background:var(--calcite-color-foreground-1)}`;
+class o extends l {
   constructor() {
-    super(...arguments), this.#t = [], this._messages = l({ blocking: !0 }), this.arcgisCancel = s(), this.arcgisSubmit = s();
+    super(...arguments), this.#t = [], this._messages = r({ blocking: !0 }), this.arcgisCancel = i(), this.arcgisSubmit = i();
   }
   static {
     this.properties = { type: 1, message: 1, options: 0 };
   }
+  static {
+    this.styles = n;
+  }
   #t;
   _renderInterruptOptions() {
     switch (this.type) {
       case "single-select":
         return e`<calcite-list selection-mode=single-persist .label=${this._messages.optionsLabel} @calciteListChange=${(t) => this.#t = t.target.selectedItems[0]?.value}>${this.options?.map((t) => e`<calcite-list-item .label=${t} .value=${t}></calcite-list-item>`)}</calcite-list>`;
       case "multi-select":
-        return e`<calcite-list selection-mode=multiple .label=${this._messages.optionsLabel} @calciteListChange=${(t) => this.#t = t.target.selectedItems.map((i) => i.value)}>${this.options?.map((t) => e`<calcite-list-item .label=${t} .value=${t}></calcite-list-item>`)}</calcite-list>`;
+        return e`<calcite-list selection-mode=multiple .label=${this._messages.optionsLabel} @calciteListChange=${(t) => this.#t = t.target.selectedItems.map((s) => s.value)}>${this.options?.map((t) => e`<calcite-list-item .label=${t} .value=${t}></calcite-list-item>`)}</calcite-list>`;
       case "boolean-choice":
         return null;
       case "text-input":
@@ -24,10 +28,10 @@ class n extends c {
     }
   }
   render() {
-    return e`<calcite-panel .description=${this.message}>${this._renderInterruptOptions()}<calcite-button slot=footer-end appearance=outline @click=${() => this.arcgisCancel.emit()}>${this._messages.cancelButtonLabel}</calcite-button><calcite-button slot=footer-end appearance=solid @click=${() => this.arcgisSubmit.emit(this.type === "boolean-choice" ? !0 : this.#t)}>${this._messages.submitButtonLabel}</calcite-button></calcite-panel>`;
+    return e`<calcite-panel .description=${this.message}><div class="interrupt-content">${this._renderInterruptOptions()}</div><calcite-button slot=footer-end appearance=outline @click=${() => this.arcgisCancel.emit()}>${this._messages.cancelButtonLabel}</calcite-button><calcite-button slot=footer-end appearance=solid @click=${() => this.arcgisSubmit.emit(this.type === "boolean-choice" ? !0 : this.#t)}>${this._messages.submitButtonLabel}</calcite-button></calcite-panel>`;
   }
 }
-a("arcgis-assistant-interrupt", n);
+a("arcgis-assistant-interrupt", o);
 export {
-  n as ArcgisAssistantInterrupt
+  o as ArcgisAssistantInterrupt
 };

package/dist/components/arcgis-assistant-interrupt-preview/customElement.js

@@ -0,0 +1,20 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as r } from "../../chunks/runtime.js";
+import { css as l, html as t } from "lit";
+import { LitElement as a } from "@arcgis/lumina";
+const n = l`.interrupt-details ul{margin-block:var(--calcite-spacing-xxs) 0;padding-inline-start:var(--calcite-spacing-xxl)}.interrupt-details li{margin-block:0}.interrupts-container{display:flex;flex-direction:column;gap:var(--calcite-spacing-lg)}`;
+class c extends a {
+  static {
+    this.properties = { interrupts: 0 };
+  }
+  static {
+    this.styles = n;
+  }
+  render() {
+    return this.interrupts?.length ? t`<calcite-block collapsible expanded heading="Assistant Questions"><div class="interrupts-container">${this.interrupts?.map(({ interrupt: s, response: i }) => t`<div class="interrupt-details"><div>Q: ${s.message}</div><ul>${Array.isArray(i) ? i.length ? i.map((e) => t`<li>${e}</li>`) : t`<li>(Question skipped)</li>` : t`<li>${i != null ? String(i) : "(Question skipped)"}</li>`}</ul></div>`)}</div></calcite-block>` : null;
+  }
+}
+r("arcgis-assistant-interrupt-preview", c);
+export {
+  c as ArcgisAssistantInterruptPreview
+};

package/dist/components/arcgis-assistant-interrupt-preview/index.js

@@ -0,0 +1,2 @@
+import "@esri/calcite-components/components/calcite-block";
+export * from "./customElement.js";

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

@@ -106,12 +106,12 @@ import type { ArcgisMap as ArcgisMap } from "@arcgis/map-components/components/a
  */
 export abstract class ArcgisAssistantKnowledgeAgent extends LitElement {
   /**
-   * Required and optional context for the knowledge agent. The knowledge agent requires either a link chart view,
-   * a map view with at least one knowledge graph layer, or KnowledgeGraph instance in order to function.
+   * Optional context for the knowledge agent. If the agent does not have a view or kg service url provided via reference element or serviceUrl property
+   * a knowledge graph can be provided directly via context to enable Knowledge Service related capabilties.
    *
    * Depending on the context provided, different capabilities will be available.
    */
-  accessor context: ArcgisKnowledgeContext | undefined;
+  accessor context: ArcgisKnowledgeAssistantContext | undefined;
   /**
    * The reference element to the map that provides context for the navigation agent. Currently,
    * this is only scoped to `arcgis-map` elements. This shows the navigation agent which map on which to
@@ -149,10 +149,10 @@ export abstract class ArcgisAssistantKnowledgeAgent extends LitElement {
  * Context required by the Knowledge Link Chart agent.
  * Supplied by the application via an agent `getContext()` provider.
  */
-export type ArcgisKnowledgeContext = {
-    knowledgeGraph: KnowledgeGraph;
-    view?: never;
-} | {
+export type ArcgisKnowledgeAssistantContext = {
     view: LinkChartView | MapView;
     knowledgeGraph?: never;
+} | {
+    knowledgeGraph: KnowledgeGraph;
+    view?: never;
 };

package/dist/components/arcgis-assistant-knowledge-agent/customElement.js

@@ -9,6 +9,7 @@ import "../../chunks/generateLayerDescriptions.js";
 import "@langchain/core/messages";
 import "@langchain/core/callbacks/dispatch/web";
 import "@langchain/openai";
+import "@arcgis/core/config.js";
 import "@arcgis/core/core/reactiveUtils.js";
 import "@arcgis/core/layers/FeatureLayer.js";
 import "@arcgis/core/request.js";

package/dist/components/arcgis-assistant-layer-styling-agent/customElement.js

@@ -9,6 +9,7 @@ import "../../chunks/generateLayerDescriptions.js";
 import "@langchain/core/messages";
 import "@langchain/core/callbacks/dispatch/web";
 import "@langchain/openai";
+import "@arcgis/core/config.js";
 import "@arcgis/core/core/reactiveUtils.js";
 import "@arcgis/core/layers/FeatureLayer.js";
 import "@arcgis/core/request.js";

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

@@ -0,0 +1,23 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { AssistantMessage } from "../arcgis-assistant/types.js";
+
+/**
+ * Renders a single assistant response message shell. Pass one assistant message object and let it host body and footer actions.
+ * Offers a reusable assistant-message layout with icon, content, and footer slot regions.
+ */
+export abstract class ArcgisAssistantMessage extends LitElement {
+  /** @default false */
+  accessor assistantAvatarEnabled: boolean;
+  /** @default false */
+  accessor copyEnabled: boolean;
+  /** @default false */
+  accessor feedbackEnabled: boolean;
+  /** @default false */
+  accessor footerDisabled: boolean;
+  /** @default false */
+  accessor logEnabled: boolean;
+  accessor message: AssistantMessage | undefined;
+  /** @default false */
+  accessor readAloudEnabled: boolean;
+}

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

@@ -1,43 +1,45 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as d } from "../../chunks/runtime.js";
-import { css as m, html as a } from "lit";
-import { LitElement as g, nothing as i } from "@arcgis/lumina";
-import { useSlottableRequest as b } from "@arcgis/lumina/controllers";
-import { g as c, a as r } from "../../chunks/slottableRequestUtils.js";
-const f = m`:host{display:block;container-type:inline-size}.container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--calcite-spacing-sm);width:100%;text-align:left}.icon{padding:var(--calcite-spacing-sm);border-radius:var(--calcite-spacing-xl);background:var(--calcite-color-brand);color:var(--calcite-color-foreground-1)}.content-container{display:flex;flex:1;flex-direction:column;width:100%;gap:var(--calcite-spacing-md)}.content,.blocks{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm)}@container (min-width: 480px){.container{max-width:80%}}`;
-function p({ message: t }) {
-  const e = /* @__PURE__ */ new Map();
-  if (!t)
-    return e;
-  const s = c(t.id);
-  return e.set(s, { data: { message: t }, name: "message", slotName: s }), t.blocks?.forEach((l, o) => {
-    const n = r(t.id, o);
-    e.set(n, { data: { block: l, index: o, message: t }, name: "block", slotName: n });
-  }), e;
+import { c as o } from "../../chunks/runtime.js";
+import { css as l, html as e } from "lit";
+import { LitElement as c, nothing as d } from "@arcgis/lumina";
+import { useSlottableRequest as g } from "@arcgis/lumina/controllers";
+import { g as r } from "../../chunks/slottableRequestUtils.js";
+const m = l`:host{display:block;container-type:inline-size}.container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--calcite-spacing-sm);width:100%;text-align:left}.icon{padding:var(--calcite-spacing-sm);border-radius:var(--calcite-spacing-xl);background:var(--calcite-color-brand);color:var(--calcite-color-foreground-1)}.content-container{display:flex;flex:1;flex-direction:column;width:100%;gap:var(--calcite-spacing-md)}.content,.blocks{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm)}.block-pending{display:flex;justify-content:center;align-items:center;padding:var(--calcite-spacing-sm);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-message-loading-shimmer 2s ease-in-out infinite;border-radius:var(--calcite-border-radius);min-height:100px}.message-error{font-style:italic}@container (min-width: 480px){.container{max-width:80%}}@keyframes assistant-message-loading-shimmer{0%{background-position:-150% 0}to{background-position:150% 0}}@media(prefers-reduced-motion){.block-pending{animation:none}}`;
+function b({ message: t }) {
+  const s = /* @__PURE__ */ new Map();
+  return t && t.blocks?.forEach((a, i) => {
+    if (!a.isPending) {
+      const n = r(t.id, i);
+      s.set(n, { data: { block: a, index: i, message: t }, name: "block", slotName: n });
+    }
+  }), s;
 }
-class h extends g {
+class p extends c {
   constructor() {
-    super(...arguments), this.arcgisSlottableRequest = b(this, ["message"], p), this.feedbackEnabled = !1, this.logEnabled = !1, this.copyEnabled = !1, this.readAloudEnabled = !1, this.footerDisabled = !1;
+    super(...arguments), this.arcgisSlottableRequest = g(this, ["message"], b), this.feedbackEnabled = !1, this.logEnabled = !1, this.copyEnabled = !1, this.readAloudEnabled = !1, this.footerDisabled = !1, this.assistantAvatarEnabled = !1;
   }
   static {
-    this.properties = { feedbackEnabled: 5, logEnabled: 5, copyEnabled: 5, readAloudEnabled: 5, footerDisabled: 5, message: 0 };
+    this.properties = { _isStreaming: 16, feedbackEnabled: 5, logEnabled: 5, copyEnabled: 5, readAloudEnabled: 5, footerDisabled: 5, message: 0, assistantAvatarEnabled: 5 };
   }
   static {
-    this.styles = f;
+    this.styles = m;
+  }
+  get _isStreaming() {
+    return !!this.message?.isStreaming;
   }
   _renderContent() {
-    const e = this.message, s = e?.id;
-    if (s)
-      return a`<div class="content"><slot name=${c(s) ?? i}></slot>${e.blocks?.length ? a`<div class="blocks">${e.blocks.map((l, o) => a`<slot name=${r(s, o) ?? i}></slot>`)}</div>` : null}</div>`;
+    const s = this.message, a = s?.id;
+    if (a)
+      return e`<div class="content"><arcgis-assistant-interrupt-preview .interrupts=${this.message?.interrupts}></arcgis-assistant-interrupt-preview>${s.blocks?.length ? e`<div class="blocks">${s.blocks.map((i, n) => i.isPending && i.type !== "text" ? e`<div class="block-pending"></div>` : e`<slot name=${r(a, n) ?? d}></slot>`)}</div>` : null}</div>`;
   }
   _renderFooter() {
-    return a`<arcgis-assistant-message-footer .message=${this.message} .feedbackEnabled=${this.feedbackEnabled} .logEnabled=${this.logEnabled} .copyEnabled=${this.copyEnabled} .readAloudEnabled=${this.readAloudEnabled}></arcgis-assistant-message-footer>`;
+    return e`<arcgis-assistant-message-footer .message=${this.message} .feedbackEnabled=${this.feedbackEnabled} .logEnabled=${this.logEnabled} .copyEnabled=${this.copyEnabled} .readAloudEnabled=${this.readAloudEnabled}></arcgis-assistant-message-footer>`;
   }
   render() {
-    return a`<div class="container"><slot name=icon><calcite-icon icon=effects class="icon" scale=s></calcite-icon></slot><div class="content-container"><slot name=content>${this._renderContent()}</slot>${this.footerDisabled ? null : a`<slot name=footer>${this._renderFooter()}</slot>`}</div></div>`;
+    return e`<div class="container">${this.assistantAvatarEnabled ? e`<slot name=icon><calcite-icon icon=effects class="icon" scale=s></calcite-icon></slot>` : null}<div class="content-container"><slot name=content>${this._renderContent()}</slot>${this.message?.error ? e`<div class="message-error">${this.message.error}</div>` : null}${this._isStreaming ? e`<div class="streaming-indicator"><calcite-loader label=loading inline></calcite-loader></div>` : null}${!this.footerDisabled && !this._isStreaming ? e`<slot name=footer>${this._renderFooter()}</slot>` : null}</div></div>`;
   }
 }
-d("arcgis-assistant-message", h);
+o("arcgis-assistant-message", p);
 export {
-  h as ArcgisAssistantMessage
+  p as ArcgisAssistantMessage
 };

package/dist/components/arcgis-assistant-message/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-assistant-message/index.js

@@ -1,3 +1,5 @@
+import "../arcgis-assistant-interrupt-preview/index.js";
 import "../arcgis-assistant-message-footer/index.js";
 import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-loader";
 export * from "./customElement.js";

package/dist/components/arcgis-assistant-message-block/customElement.d.ts

@@ -2,7 +2,7 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { UXSuggestion } from "../../utils/index.js";
 
-/** A primitive for rendering a default assistant output block. */
+/** Renders one structured assistant block. Offers default block rendering for supported suggestion-style blocks. */
 export abstract class ArcgisAssistantMessageBlock extends LitElement {
   accessor block: UXSuggestion | undefined;
 }

package/dist/components/arcgis-assistant-message-block/customElement.js

@@ -1,29 +1,36 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as o } from "../../chunks/runtime.js";
-import { css as i, html as p } from "lit";
-import { LitElement as n } from "@arcgis/lumina";
-const l = i`:host{display:block}`;
-class a extends n {
+import { c as n } from "../../chunks/runtime.js";
+import { css as i, html as r } from "lit";
+import { LitElement as o } from "@arcgis/lumina";
+const p = i`:host{display:block}`;
+class c extends o {
   static {
     this.properties = { block: 0 };
   }
   static {
-    this.styles = l;
+    this.styles = p;
   }
   _renderSuggestedPrompts(s) {
     if (s.type !== "suggested-prompts")
       return null;
-    const t = s.data?.prompts, e = Array.isArray(t) ? t.filter((r) => typeof r == "string") : [];
-    return e.length ? p`<arcgis-assistant-suggested-prompts .prompts=${e}></arcgis-assistant-suggested-prompts>` : null;
+    const t = s.data?.prompts, e = Array.isArray(t) ? t.filter((a) => typeof a == "string") : [];
+    return e.length ? r`<arcgis-assistant-suggested-prompts .prompts=${e}></arcgis-assistant-suggested-prompts>` : null;
   }
   _renderBlock(s) {
-    return s.type === "suggested-prompts" ? this._renderSuggestedPrompts(s) : null;
+    switch (s.type) {
+      case "suggested-prompts":
+        return this._renderSuggestedPrompts(s);
+      case "text":
+        return r`<arcgis-assistant-message-text .content=${s.data?.content}></arcgis-assistant-message-text>`;
+      default:
+        return null;
+    }
   }
   render() {
     return this.block ? this._renderBlock(this.block) : null;
   }
 }
-o("arcgis-assistant-message-block", a);
+n("arcgis-assistant-message-block", c);
 export {
-  a as ArcgisAssistantMessageBlock
+  c as ArcgisAssistantMessageBlock
 };

package/dist/components/arcgis-assistant-message-block/index.js

@@ -1,2 +1,3 @@
 import "../arcgis-assistant-suggested-prompts/index.js";
+import "../arcgis-assistant-message-text/index.js";
 export * from "./customElement.js";

package/dist/components/arcgis-assistant-message-feedback/customElement.d.ts

@@ -3,7 +3,10 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { AssistantMessage } from "../arcgis-assistant/types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
-/** @internal */
+/**
+ * Handles thumbs up or down feedback UI. Use it to capture helpful or not helpful signals per response.
+ * Offers feedback toggle behavior and emits feedback updates for the associated assistant message.
+ */
 export abstract class ArcgisAssistantMessageFeedback extends LitElement {
   /** @internal */
   protected _messages: {

package/dist/components/arcgis-assistant-message-footer/customElement.d.ts

@@ -3,7 +3,10 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { AssistantMessage } from "../arcgis-assistant/types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
-/** @internal */
+/**
+ * Renders the action row under an assistant message. Use it when you want feedback, log, copy, or read-aloud controls.
+ * Offers one footer surface that composes common assistant response actions.
+ */
 export abstract class ArcgisAssistantMessageFooter extends LitElement {
   /** @internal */
   protected _messages: {

package/dist/components/arcgis-assistant-message-loading/customElement.d.ts

@@ -1,8 +1,15 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { AssistantMessage } from "../arcgis-assistant/types.js";
 
-/** @internal */
+/**
+ * Shows in-progress assistant response UI. Use it to display thinking or loading state while work is running.
+ * Offers a default loading message shell with icon/content slot overrides.
+ */
 export abstract class ArcgisAssistantMessageLoading extends LitElement {
+  /** @default false */
+  accessor assistantAvatarEnabled: boolean;
+  accessor interrupts: AssistantMessage["interrupts"] | undefined;
   /** @default false */
   accessor loading: boolean;
   /** @default "" */

package/dist/components/arcgis-assistant-message-loading/customElement.js

@@ -1,23 +1,23 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as a } from "../../chunks/runtime.js";
-import { css as e, html as s } from "lit";
+import { c as s } from "../../chunks/runtime.js";
+import { css as e, html as a } from "lit";
 import { LitElement as i } from "@arcgis/lumina";
 const t = e`:host{display:contents}.icon{padding:var(--calcite-spacing-sm);border-radius:var(--calcite-spacing-xl);background:var(--calcite-color-brand);color:var(--calcite-color-foreground-1)}.loading-container{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);padding:0 var(--calcite-spacing-sm)}.loading{display:flex;align-items:center;gap:var(--calcite-spacing-sm)}.text{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}.skeleton-block{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);width:100%}.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-message-loading-shimmer 1.2s ease-in-out infinite;width:85%}.skeleton-text:last-child{width:70%}@keyframes assistant-message-loading-shimmer{0%{background-position:-150% 0}to{background-position:150% 0}}@media(prefers-reduced-motion){.skeleton-text{animation:none}}`;
-class o extends i {
+class n extends i {
   constructor() {
-    super(...arguments), this.loading = !1, this.loadingMessage = "";
+    super(...arguments), this.loading = !1, this.loadingMessage = "", this.assistantAvatarEnabled = !1;
   }
   static {
-    this.properties = { loading: 5, loadingMessage: 1 };
+    this.properties = { loading: 5, loadingMessage: 1, assistantAvatarEnabled: 5, interrupts: 0 };
   }
   static {
     this.styles = t;
   }
   render() {
-    return this.loading ? s`<arcgis-assistant-message footer-disabled><slot name=icon slot=icon><calcite-icon class="icon" icon=effects scale=s></calcite-icon></slot><slot name=content slot=content><div class="loading-container"><div class="loading"><calcite-loader label=loading inline></calcite-loader><div class="text">${this.loadingMessage}</div></div><div class="skeleton-block"><span class="skeleton-text"></span><span class="skeleton-text"></span></div></div></slot></arcgis-assistant-message>` : null;
+    return this.loading ? a`<arcgis-assistant-message footer-disabled>${this.assistantAvatarEnabled ? a`<slot name=icon slot=icon><calcite-icon class="icon" icon=effects scale=s></calcite-icon></slot>` : null}<slot name=content slot=content><arcgis-assistant-interrupt-preview .interrupts=${this.interrupts}></arcgis-assistant-interrupt-preview><div class="loading-container"><div class="loading"><calcite-loader label=loading inline></calcite-loader><div class="text">${this.loadingMessage}</div></div><div class="skeleton-block"><span class="skeleton-text"></span><span class="skeleton-text"></span></div></div></slot></arcgis-assistant-message>` : null;
   }
 }
-a("arcgis-assistant-message-loading", o);
+s("arcgis-assistant-message-loading", n);
 export {
-  o as ArcgisAssistantMessageLoading
+  n as ArcgisAssistantMessageLoading
 };