@arcgis/ai-components 5.1.0-next.128 → 5.1.0-next.129

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

@@ -1,35 +1,55 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as $ } from "../../chunks/runtime.js";
-import { css as k, html as a } from "lit";
-import S from "@arcgis/core/core/Collection.js";
-import { whenOnce as C, watch as L, when as I } from "@arcgis/core/core/reactiveUtils.js";
-import P from "@arcgis/core/portal/Portal.js";
-import { LitElement as R, createEvent as o, nothing as b } from "@arcgis/lumina";
-import { rethrowError as x } from "@arcgis/toolkit/log";
-import { createRef as f, ref as y } from "lit/directives/ref.js";
+import { css as C, html as l } from "lit";
+import I from "@arcgis/core/core/Collection.js";
+import { whenOnce as P, watch as A, when as x } from "@arcgis/core/core/reactiveUtils.js";
+import L from "@arcgis/core/portal/Portal.js";
+import { LitElement as R, createEvent as g, nothing as k } from "@arcgis/lumina";
+import { rethrowError as O } from "@arcgis/toolkit/log";
+import { createRef as _, ref as v } from "lit/directives/ref.js";
 import { u as M } from "../../chunks/useT9n.js";
-import { O } from "../../chunks/orchestrator.js";
+import { O as D } from "../../chunks/orchestrator.js";
 import "@langchain/core/callbacks/dispatch/web";
 import "@langchain/core/prompts";
 import "@langchain/openai";
-import "@arcgis/core/identity/IdentityManager.js";
+import T from "@arcgis/core/identity/IdentityManager.js";
 import "@langchain/core/messages";
 import "@arcgis/core/layers/FeatureLayer.js";
 import "../../chunks/generateLayerDescriptions.js";
 import "@langchain/langgraph/web";
-import A from "@arcgis/core/core/Accessor.js";
-import { property as u, subclass as q } from "@arcgis/core/core/accessorSupport/decorators.js";
-import { g as z } from "../../chunks/utils3.js";
-import { g as v, a as _ } from "../../chunks/slottableRequestUtils.js";
-const V = k`:host{display:block;width:var(--arcgis-internal-panel-width, 100%);height:var(--arcgis-internal-expand-max-height, 100%)}.footer-container{display:flex;flex-direction:column;flex:1 1 0;gap:var(--calcite-spacing-md)}.content-container{display:flex;flex-direction:column;flex:1 1 0;min-height:0;position:relative;overflow:auto}.suggested-prompts-container{display:flex;justify-content:center;width:100%}.suggested-prompts{display:block;padding:var(--calcite-spacing-md);max-width:100%;box-sizing:border-box}.error-notice{padding:var(--calcite-spacing-sm)}`;
-var N = Object.defineProperty, j = Object.getOwnPropertyDescriptor, h = (p, t, e, i) => {
-  for (var s = i > 1 ? void 0 : i ? j(t, e) : t, r = p.length - 1, n; r >= 0; r--)
-    (n = p[r]) && (s = (i ? n(t, e, s) : n(s)) || s);
-  return i && s && N(t, e, s), s;
+import N from "@arcgis/core/core/Accessor.js";
+import { property as b, subclass as B } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { g as V } from "../../chunks/utils3.js";
+import { g as w } from "../../chunks/slottableRequestUtils.js";
+const z = C`:host{display:block;width:var(--arcgis-internal-panel-width, 100%);height:var(--arcgis-internal-expand-max-height, 100%);--calcite-panel-content-bottom-space: 0}.footer-container{display:flex;flex-direction:column;flex:1 1 0;gap:var(--calcite-spacing-md)}.content-container{display:flex;flex-direction:column;flex:1 1 0;min-height:0;position:relative;overflow:auto}.suggested-prompts-container{display:flex;justify-content:center;width:100%;background:var(--calcite-panel-background-color, var(--calcite-color-background))}.suggested-prompts{display:block;padding:var(--calcite-spacing-md);max-width:100%;box-sizing:border-box}.error-notice{padding:var(--calcite-spacing-sm)}.interrupt-waiting-message{font-style:italic;color:var(--calcite-color-text-2)}`;
+var H = Object.defineProperty, j = Object.getOwnPropertyDescriptor, m = (c, t, e, i) => {
+  for (var r = i > 1 ? void 0 : i ? j(t, e) : t, n = c.length - 1, s; n >= 0; n--)
+    (s = c[n]) && (r = (i ? s(t, e, r) : s(r)) || r);
+  return i && r && H(t, e, r), r;
 };
-let l = class extends A {
-  constructor(p) {
-    super(p), this.view = null, this.loading = !1, this.processing = !1, this.processingStep = "";
+const q = async (c) => await new Promise((t) => setTimeout(t, c));
+async function* F(c, {
+  chunkSize: t = 5,
+  // chars per "token"
+  delay: e = 20
+  // ms between chunks
+} = {}) {
+  let i = 0;
+  for (; i < c.length; )
+    yield c.slice(i, i + t), i += t, await q(e);
+}
+async function* E(c, t, e, i) {
+  for await (const r of F(c)) {
+    if (i?.aborted) {
+      yield { type: "cancelled", log: e, runId: t };
+      return;
+    }
+    yield { type: "block-data", blockType: "text", data: { content: r }, runId: t };
+  }
+}
+let d = class extends N {
+  constructor(c) {
+    super(c), this.view = null, this.loading = !1, this.processing = !1, this.processingStep = "";
   }
   async load() {
     this._set("loading", !0);
@@ -43,14 +63,14 @@ let l = class extends A {
     this.orchestrator?.dispose(), super.destroy();
   }
   async _initialize() {
-    this.removeHandles(), await Promise.all([this.portal.load(), this.view?.when()]), this.view && await C(() => !this.view.updating), this._set(
+    this.removeHandles(), await Promise.all([this.portal.load(), this.view?.when()]), this.view && await P(() => !this.view.updating), this._set(
       "orchestrator",
-      await O.init({
+      await D.init({
         agents: [...this.agents],
         view: this.view ?? void 0
       })
     ), this.addHandles([
-      L(
+      A(
         () => [this.view, this.agents],
         () => {
           this._initialize();
@@ -61,108 +81,122 @@ let l = class extends A {
   clearChatHistory() {
     this.orchestrator?.newConversation();
   }
-  async *ask(p, t) {
+  async *ask(c, t) {
     if (!this.orchestrator)
       throw new Error("Orchestrator not initialized yet.");
     this._set("processing", !0), this._set("processingStep", "");
     const e = [];
     let i;
     try {
-      const s = this.orchestrator.ask(p);
-      for await (const r of s) {
-        const n = r.runId;
-        if (t?.aborted) {
-          yield { type: "cancelled", runId: n };
-          break;
-        }
-        switch (r.type) {
+      const r = this.orchestrator.ask(c);
+      for await (const n of r) {
+        const s = n.runId;
+        switch (n.type) {
           case "trace": {
-            this._set("processingStep", r.data.text), e.push(r.data.text);
+            this._set("processingStep", n.data.text), e.push(n.data.text);
             break;
           }
           case "completed": {
-            const c = r.result, g = !!c.content.length, m = !!i?.length;
-            if (!g && !m) {
-              yield { type: "completed", error: "Could not process the request.", log: e, runId: n };
+            this._set("processing", !1), this._set("processingStep", "");
+            const a = n.result, o = !!a.content.length, h = !!i?.length;
+            if (!o && !h) {
+              yield { type: "completed", error: "No response received.", log: e, runId: s };
               return;
             }
-            const d = c.content;
-            this._set("processingStep", ""), yield { type: "completed", response: d, blocks: i, log: e, runId: n };
+            const p = a.content;
+            if (yield { type: "block-start", blockType: "text", runId: s }, yield* E(p, s, e, t), yield { type: "block-end", blockType: "text", runId: s }, h)
+              for (const f of i) {
+                if (t?.aborted) {
+                  yield { type: "cancelled", log: e, runId: s };
+                  return;
+                }
+                const { type: u, data: y } = f;
+                if (yield { type: "block-start", blockType: u, runId: s }, u === "text") {
+                  const S = typeof y?.content == "string" ? y.content : "";
+                  yield* E(S, s, e, t);
+                } else
+                  yield { type: "block-data", blockType: u, data: y, runId: s };
+                yield { type: "block-end", blockType: u, runId: s };
+              }
+            yield { type: "completed", response: p, blocks: i, log: e, runId: s };
             return;
           }
           case "ux-suggestion": {
-            const c = r.suggestion;
-            i = i ? [...i, c] : [c];
+            const a = n.suggestion;
+            i = i ? [...i, a] : [a];
             break;
           }
           case "interrupt": {
-            const { kind: c, message: g, metadata: m } = r.interrupt, d = Array.isArray(m) ? m.filter((E) => typeof E == "string") : [], w = (() => {
-              switch (c) {
+            const { kind: a, message: o, metadata: h } = n.interrupt, p = Array.isArray(h) ? h.filter((u) => typeof u == "string") : [], f = (() => {
+              switch (a) {
                 case "booleanChoice":
-                  return { type: "boolean-choice", message: g, options: d };
+                  return { type: "boolean-choice", message: o, options: p };
                 case "singleSelection":
-                  return { type: "single-select", message: g, options: d };
+                  return { type: "single-select", message: o, options: p };
                 case "multipleSelection":
-                  return { type: "multi-select", message: g, options: d };
+                  return { type: "multi-select", message: o, options: p };
                 case "textInput":
-                  return { type: "text-input", message: g };
+                  return { type: "text-input", message: o };
                 default:
-                  return { type: c, message: g, options: d };
+                  return { type: a, message: o, options: p };
               }
             })();
-            this._set("processingStep", "Waiting for user input..."), yield { type: "interrupt", payload: w, runId: n };
+            this._set("processingStep", "Waiting for user input..."), yield { type: "interrupt", payload: f, runId: s };
             break;
           }
           case "cancelled": {
-            yield { type: "cancelled", runId: n };
+            yield { type: "cancelled", log: e, runId: s };
             return;
           }
           case "error": {
-            yield { type: "completed", error: r.error.message, log: e, runId: n };
+            yield { type: "completed", error: n.error.message, log: e, runId: s };
             return;
           }
           default: {
-            console.warn("Unknown event type:", r);
+            console.warn("Unknown event type:", n);
             break;
           }
         }
       }
-    } catch (s) {
-      console.warn("Error during message processing:", s), yield { type: "completed", error: "An error occurred during message processing.", log: e, runId: "error" };
+    } catch (r) {
+      console.warn("Error during message processing:", r), yield { type: "completed", error: "An error occurred during message processing.", log: e, runId: "error" };
       return;
     } finally {
       this._set("processing", !1);
     }
   }
+  cancel() {
+    this.orchestrator?.cancel();
+  }
 };
-h([
-  u({ readOnly: !0 })
-], l.prototype, "orchestrator", 2);
-h([
-  u()
-], l.prototype, "agents", 2);
-h([
-  u()
-], l.prototype, "portal", 2);
-h([
-  u()
-], l.prototype, "view", 2);
-h([
-  u({ readOnly: !0 })
-], l.prototype, "loading", 2);
-h([
-  u({ readOnly: !0 })
-], l.prototype, "processing", 2);
-h([
-  u({ readOnly: !0 })
-], l.prototype, "processingStep", 2);
-l = h([
-  q("OrchestratorController")
-], l);
-const B = "Embeddings resource 'embeddings-v01.json' not found in the webmap portal item.", H = "Embeddings not found for this web map.", D = "https://developers.arcgis.com/javascript/latest/agentic-apps/ai-webmap-setup/#embeddings";
-class F extends R {
+m([
+  b({ readOnly: !0 })
+], d.prototype, "orchestrator", 2);
+m([
+  b()
+], d.prototype, "agents", 2);
+m([
+  b()
+], d.prototype, "portal", 2);
+m([
+  b()
+], d.prototype, "view", 2);
+m([
+  b({ readOnly: !0 })
+], d.prototype, "loading", 2);
+m([
+  b({ readOnly: !0 })
+], d.prototype, "processing", 2);
+m([
+  b({ readOnly: !0 })
+], d.prototype, "processingStep", 2);
+d = m([
+  B("OrchestratorController")
+], d);
+const G = "Embeddings resource 'embeddings-v01.json' not found in the webmap portal item.", U = "Embeddings not found for this web map.", W = "https://developers.arcgis.com/javascript/latest/agentic-apps/ai-webmap-setup/#embeddings";
+class Y extends R {
   constructor() {
-    super(...arguments), this._messages = M({ blocking: !0 }), this.#t = f(), this.#n = f(), this.#e = f(), this.#s = null, this.#o = /* @__PURE__ */ new Map(), this.#r = P.getDefault(), this.#i = (t) => {
+    super(...arguments), this._messages = M({ blocking: !0 }), this.#t = _(), this.#n = _(), this.#s = _(), this.#e = null, this.#o = /* @__PURE__ */ new Map(), this.#i = L.getDefault(), this.#r = (t) => {
       t.stopPropagation(), this.cancelInterrupt();
     }, this.#a = (t) => {
       t.stopPropagation();
@@ -173,11 +207,11 @@ class F extends R {
       const e = t.detail;
       this._inputValue = "", this.arcgisSubmit.emit(e), this.submitMessage(e);
     }, this.#c = (t) => {
-      if (t.stopPropagation(), this.arcgisCancel.emit(), this._interrupt) {
+      if (this._canceling = !0, t.stopPropagation(), this.arcgisCancel.emit(), this._interrupt) {
         this.orchestrator?.cancelInterrupt(), this._interrupt = null;
         return;
       }
-      this.#s?.abort();
+      this._orchestratorController?.cancel(), this.#e?.abort(), this.#e = null;
     }, this.#h = (t) => {
       t.stopPropagation();
       const e = t.detail;
@@ -188,43 +222,43 @@ class F extends R {
       this._inputValue = e.prompt, this.arcgisPromptSelect.emit(e);
     }, this.#g = (t) => {
       this.arcgisSlottableRequest.emit(t.detail);
-    }, this._orchestratorController = null, this._interrupt = null, this._error = null, this._inputValue = "", this.messages = new S([]), this.referenceElement = null, this.suggestedPrompts = [], this.feedbackEnabled = !1, this.keepSuggestedPrompts = !1, this.logEnabled = !1, this.copyEnabled = !1, this.voiceInputEnabled = !1, this.readAloudEnabled = !1, this.arcgisCancel = o(), this.arcgisError = o(), this.arcgisFeedback = o(), this.arcgisInterrupt = o(), this.arcgisInterruptCancel = o(), this.arcgisInterruptSubmit = o(), this.arcgisPromptSelect = o(), this.arcgisReady = o(), this.arcgisSubmit = o(), this.arcgisSlottableRequest = o({ bubbles: !1, composed: !1 });
+    }, this._orchestratorController = null, this._interrupt = null, this._interruptDetails = [], this._error = null, this._inputValue = "", this._isAnswering = !1, this._canceling = !1, this.messages = new I([]), this.referenceElement = null, this.suggestedPrompts = [], this.feedbackEnabled = !1, this.keepSuggestedPrompts = !1, this.logEnabled = !1, this.copyEnabled = !1, this.voiceInputEnabled = !1, this.readAloudEnabled = !1, this.assistantAvatarEnabled = !1, this.arcgisCancel = g(), this.arcgisError = g(), this.arcgisFeedback = g(), this.arcgisInterrupt = g(), this.arcgisInterruptCancel = g(), this.arcgisInterruptSubmit = g(), this.arcgisPromptSelect = g(), this.arcgisReady = g(), this.arcgisSubmit = g(), this.arcgisSlottableRequest = g({ bubbles: !1, composed: !1 }), this.arcgisResponse = g();
   }
   static {
-    this.properties = { _orchestratorController: 16, _interrupt: 16, _error: 16, _inputValue: 16, _user: 16, awaitingResponse: 32, awaitingResponseStep: 32, interrupt: 32, messages: 0, orchestrator: 32, entryMessage: 1, heading: 1, description: 1, referenceElement: 1, suggestedPrompts: 0, feedbackEnabled: 5, keepSuggestedPrompts: 5, logEnabled: 5, copyEnabled: 5, voiceInputEnabled: 5, readAloudEnabled: 5 };
+    this.properties = { _orchestratorController: 16, _interrupt: 16, _interruptDetails: 16, _error: 16, _inputValue: 16, _isAnswering: 16, _canceling: 16, _user: 16, awaitingResponse: 32, awaitingResponseStep: 32, interrupt: 32, messages: 0, orchestrator: 32, entryMessage: 1, heading: 1, description: 1, referenceElement: 1, suggestedPrompts: 0, feedbackEnabled: 5, keepSuggestedPrompts: 5, logEnabled: 5, copyEnabled: 5, voiceInputEnabled: 5, readAloudEnabled: 5, assistantAvatarEnabled: 5 };
   }
   static {
-    this.styles = V;
+    this.styles = z;
   }
   #t;
   #n;
-  #e;
   #s;
+  #e;
   #o;
-  #r;
   #i;
+  #r;
   #a;
   #l;
   #c;
   #h;
   #p;
   #g;
-  async #u() {
+  async #d() {
     try {
-      const t = z(this.el, this.referenceElement);
+      const t = V(this.el, this.referenceElement);
       await t?.componentOnReady();
       const e = [...this.#o.values()];
-      return e.length ? (this._orchestratorController = new l({
+      return e.length ? (this._orchestratorController = new d({
         agents: e,
-        portal: this.#r,
+        portal: this.#i,
         view: t?.view
       }), await this._orchestratorController.load(), !0) : (this._error = "No agents found.", !1);
     } catch (t) {
-      return this._error = t?.message ?? "Error initializing orchestrator.", x(this)(t), !1;
+      return this._error = t?.message ?? "Error initializing orchestrator.", O(this)(t), !1;
     }
   }
   get _user() {
-    return this.#r?.user?.fullName || this.#r?.user?.username;
+    return this.#i?.user?.fullName || this.#i?.user?.username;
   }
   get awaitingResponse() {
     return this._orchestratorController?.processing ?? !1;
@@ -256,35 +290,91 @@ class F extends R {
       content: e
     }), !this._orchestratorController))
       return;
-    const i = this._orchestratorController.ask(e, this.#s?.signal);
-    for await (const s of i) {
-      const r = s.runId;
-      switch (s.type) {
+    this.#e = new AbortController();
+    const i = this._orchestratorController.ask(e, this.#e?.signal);
+    for await (const r of i) {
+      const n = r.runId, s = this.messages.at(-1);
+      switch (r.type) {
+        case "block-start": {
+          this._isAnswering = !0;
+          const a = { type: r.blockType, isPending: !0 };
+          if (s?.role === "assistant" && s.id === n) {
+            const o = [...s.blocks ?? [], a];
+            this.messages.splice(-1, 1, { ...s, blocks: o });
+          } else
+            this.messages.push({
+              role: "assistant",
+              blocks: [a],
+              id: n,
+              isStreaming: !0,
+              interrupts: this._interruptDetails
+            }), this._interruptDetails = [];
+          break;
+        }
+        case "block-data": {
+          if (s?.role !== "assistant" || s?.id !== n)
+            break;
+          const a = [...s.blocks ?? []], o = a[a.length - 1], { blockType: h, data: p } = r;
+          if (o?.type !== h || !o.isPending)
+            break;
+          if (h === "text") {
+            const f = typeof o.data?.content == "string" ? o.data.content : "", u = typeof p?.content == "string" ? p.content : "";
+            a[a.length - 1] = { ...o, data: { ...o.data, content: f + u } };
+          } else
+            a[a.length - 1] = { ...o, data: { ...o.data, ...p ?? {} } };
+          this.messages.splice(-1, 1, { ...s, blocks: a });
+          break;
+        }
+        case "block-end": {
+          if (s?.role !== "assistant" || s?.id !== n)
+            break;
+          const a = [...s.blocks ?? []], o = a[a.length - 1];
+          if (o?.type !== r.blockType || !o.isPending)
+            break;
+          const h = o;
+          a[a.length - 1] = { ...h, data: { ...h.data }, isPending: !1 }, this.messages.splice(-1, 1, { ...s, blocks: a });
+          break;
+        }
         case "completed":
-          this.messages.push({
+          r.error ? (this.messages.push({
             role: "assistant",
-            content: s.response,
-            blocks: s.blocks,
-            log: s.log,
-            error: s.error,
-            id: r
-          });
+            log: r.log,
+            error: r.error,
+            id: n,
+            interrupts: this._interruptDetails
+          }), this._interruptDetails = []) : s?.role === "assistant" && s.id === n && this.messages.splice(-1, 1, {
+            ...s,
+            content: r.response,
+            blocks: s.blocks?.map((a) => ({ ...a, isPending: !1 })) ?? [],
+            isStreaming: !1,
+            log: r.log
+          }), this._isAnswering = !1, this.#e = null, this._canceling = !1;
           break;
         case "interrupt":
-          this._interrupt = { ...s.payload, id: r }, this.arcgisInterrupt.emit(this._interrupt);
+          this._interrupt = { ...r.payload, id: n }, this.arcgisInterrupt.emit(this._interrupt);
           break;
         case "cancelled":
-          this.messages.push({
+          s?.role === "assistant" && s.id === n ? this.messages.splice(-1, 1, {
+            ...s,
+            blocks: s.blocks?.filter((a) => a.type === "text" || !a.isPending) ?? [],
+            isStreaming: !1,
+            log: r.log,
+            error: "(Stopped by user)"
+            // TODO: use strings from t9n
+          }) : (this.messages.push({
             role: "assistant",
-            error: "Request cancelled.",
-            id: r
-          });
+            log: r.log,
+            error: "(Stopped by user)",
+            // TODO: use strings from t9n
+            id: n,
+            interrupts: this._interruptDetails
+          }), this._interruptDetails = []), this._isAnswering = !1, this.#e = null, this._canceling = !1;
           break;
       }
     }
   }
   submitInterrupt(t) {
-    this.arcgisInterruptSubmit.emit(t), this.orchestrator?.resumeInterrupt(t), this._interrupt = null;
+    this.arcgisInterruptSubmit.emit(t), this._interrupt && (this._interruptDetails = [...this._interruptDetails, { interrupt: this._interrupt, response: t }]), this.orchestrator?.resumeInterrupt(t), this._interrupt = null;
   }
   load() {
     this.manager.onLifecycle(this._reset.bind(this));
@@ -292,38 +382,48 @@ class F extends R {
   loaded() {
     this.manager.onLifecycle(() => {
       this.#t.value?.addEventListener("arcgisPromptSelect", this.#p), this.#t.value?.addEventListener("arcgisSubmit", this.#l), this.#t.value?.addEventListener("arcgisCancel", this.#c), this.#t.value?.addEventListener("arcgisFeedback", this.#h);
-      const t = I(() => !!this._interrupt && !!this.#e.value, () => {
-        const e = this.#e.value;
-        e.removeEventListener("arcgisSubmit", this.#a), e.removeEventListener("arcgisCancel", this.#i), e.addEventListener("arcgisSubmit", this.#a, { once: !0 }), e.addEventListener("arcgisCancel", this.#i, { once: !0 });
+      const t = x(() => !!this._interrupt && !!this.#s.value, () => {
+        const i = this.#s.value;
+        i.removeEventListener("arcgisSubmit", this.#a), i.removeEventListener("arcgisCancel", this.#r), i.addEventListener("arcgisSubmit", this.#a, { once: !0 }), i.addEventListener("arcgisCancel", this.#r, { once: !0 });
+      }), e = this.messages.on("after-add", (i) => {
+        const r = i.item;
+        r.role === "assistant" && (r.error || r.content) && this.arcgisResponse.emit(r);
       });
       return queueMicrotask(() => {
-        this.#u().then((e) => {
-          e ? this.arcgisReady.emit() : this._error && this.arcgisError.emit(new Error(this._error));
+        this.#d().then((i) => {
+          i ? this.arcgisReady.emit() : this._error && this.arcgisError.emit(new Error(this._error));
         });
       }), () => {
-        t.remove(), this.#t.value?.removeEventListener("arcgisPromptSelect", this.#p), this.#e.value?.removeEventListener("arcgisSubmit", this.#a), this.#e.value?.removeEventListener("arcgisCancel", this.#i), this.#t.value?.removeEventListener("arcgisSubmit", this.#l), this.#t.value?.removeEventListener("arcgisCancel", this.#c), this.#t.value?.removeEventListener("arcgisFeedback", this.#h), this._orchestratorController?.destroy(), this._orchestratorController = null;
+        t.remove(), e.remove(), this.#t.value?.removeEventListener("arcgisPromptSelect", this.#p), this.#s.value?.removeEventListener("arcgisSubmit", this.#a), this.#s.value?.removeEventListener("arcgisCancel", this.#r), this.#t.value?.removeEventListener("arcgisSubmit", this.#l), this.#t.value?.removeEventListener("arcgisCancel", this.#c), this.#t.value?.removeEventListener("arcgisFeedback", this.#h), this._orchestratorController?.destroy(), this._orchestratorController = null;
       };
     });
   }
   _reset() {
-    this.#s?.abort(), this._interrupt = null, this.messages.removeAll(), this._error = null, this._inputValue = "";
+    this._orchestratorController?.cancel(), this.#e?.abort(), this._interrupt = null, this.messages.removeAll(), this._error = null, this._inputValue = "";
   }
   _renderEntryMessage() {
-    return this._interrupt ? a`<slot name=interrupt><arcgis-assistant-interrupt .type=${this._interrupt.type} .message=${this._interrupt.message} .options=${this._interrupt.options} ${y(this.#e)}></arcgis-assistant-interrupt></slot>` : this._error ? this._renderErrorNotice() : this.entryMessage ? this.messages.length > 0 ? null : a`<calcite-notice open kind=info closable icon width=full><div slot=message>${this.entryMessage}</div></calcite-notice>` : a`<slot name=entry-message></slot>`;
+    return !this._user ? this._renderSignInNotice() : this._error ? this._renderErrorNotice() : this.entryMessage ? this.messages.length > 0 ? null : l`<calcite-notice open kind=brand closable icon width=full><div slot=message>${this.entryMessage}</div></calcite-notice>` : l`<slot name=entry-message></slot>`;
   }
-  _renderErrorNotice() {
-    return this._error ? a`<calcite-notice closable slot=entry-message open kind=danger icon width=full>${this._error === B ? a`<div slot=message>${H}</div><calcite-link slot=link .href=${D} target=_blank title="Learn about web map embeddings">Read more</calcite-link>` : a`<div slot=message>${this._error}</div>`}</calcite-notice>` : null;
+  _renderSignInNotice() {
+    const t = this.#i;
+    return l`<calcite-notice slot=entry-message open kind=brand icon width=full><div slot=message>You need to sign in to use the assistant chat.</div>${t ? l`<calcite-link slot=link @click=${async () => {
+      try {
+        await T.getCredential(t.url), this._error = null, await this.#d(), this.arcgisReady.emit();
+      } catch (e) {
+        console.error("Error signing in:", e);
+      }
+    }} target=_blank title="Sign in to ArcGIS Online">Sign in</calcite-link>` : l`<div slot=link>No portal information available</div>`}</calcite-notice>`;
   }
-  _renderSuggestedPrompts() {
-    return this.suggestedPrompts?.length ? a`<div class="suggested-prompts-container"><arcgis-assistant-suggested-prompts class="suggested-prompts" .prompts=${this.suggestedPrompts}></arcgis-assistant-suggested-prompts></div>` : null;
+  _renderErrorNotice() {
+    return this._error ? l`<calcite-notice slot=entry-message open kind=brand icon width=full>${this._error === G ? l`<div slot=message>${U}</div><calcite-link slot=link .href=${W} target=_blank title="Learn about web map embeddings">Read more</calcite-link>` : l`<div slot=message>${this._error}</div>`}</calcite-notice>` : null;
   }
   render() {
-    return a`<calcite-panel .loading=${!this._orchestratorController && !this._error || this._orchestratorController?.loading} .heading=${this.heading ?? this._messages.assistantLabel} .description=${this.description} ${y(this.#t)}><slot name=header-actions-start slot=header-actions-start></slot><slot name=header-actions-end slot=header-actions-end></slot><div class="content-container"><arcgis-assistant-chat .loading=${this.awaitingResponse} .messages=${this.messages}><slot name=message-starter slot=message-starter></slot><slot name=messages slot=messages>${this.messages.map((t) => t.role === "assistant" ? a`<arcgis-assistant-message .message=${t} .feedbackEnabled=${this.feedbackEnabled} .logEnabled=${this.logEnabled} .copyEnabled=${this.copyEnabled} .readAloudEnabled=${this.readAloudEnabled} @arcgisSlottableRequest=${this.#g}><slot name=${v(t.id) ?? b} slot=${v(t.id) ?? b}>${t?.error ? a`<calcite-notice class="error-notice" open icon kind=warning width=full><div slot=message>${t.error}</div></calcite-notice>` : a`<arcgis-assistant-message-text .content=${t?.content}></arcgis-assistant-message-text>`}</slot>${t.blocks?.map((e, i) => a`<slot name=${_(t.id, i) ?? b} slot=${_(t.id, i) ?? b}><arcgis-assistant-message-block .block=${e}></arcgis-assistant-message-block></slot>`)}</arcgis-assistant-message>` : a`<arcgis-assistant-user-message .message=${t} .user=${this._user}></arcgis-assistant-user-message>`)}</slot><slot name=message-loading slot=message-loading><arcgis-assistant-message-loading .loading=${this.awaitingResponse} .loadingMessage=${this.awaitingResponseStep}></arcgis-assistant-message-loading></slot></arcgis-assistant-chat></div>${this._renderSuggestedPrompts()}<div class="footer-container" slot=footer>${this._renderEntryMessage()}<slot name=chat-entry><arcgis-assistant-chat-entry .awaitingResponse=${this.awaitingResponse} .inputValue=${this._inputValue} .messages=${this.messages} .voiceInputEnabled=${this.voiceInputEnabled} ${y(this.#n)}><slot name=entry-actions-start slot=entry-actions-start></slot><slot name=entry-actions-end slot=entry-actions-end><calcite-button .iconStart=${this.awaitingResponse ? "circle-stop" : "send"} @click=${() => {
+    return l`<calcite-panel .loading=${!this._orchestratorController && !this._error || this._orchestratorController?.loading} .heading=${this.heading ?? this._messages.assistantLabel} .description=${this.description} ${v(this.#t)}><slot name=header-actions-start slot=header-actions-start></slot><slot name=header-actions-end slot=header-actions-end></slot><div class="content-container"><arcgis-assistant-chat .loading=${this.awaitingResponse} .messages=${this.messages} .interrupt=${this._interrupt}><slot name=message-starter slot=message-starter></slot><slot name=messages slot=messages>${this.messages.map((t) => t.role === "assistant" ? l`<arcgis-assistant-message .message=${t} .feedbackEnabled=${this.feedbackEnabled} .logEnabled=${this.logEnabled} .copyEnabled=${this.copyEnabled} .readAloudEnabled=${this.readAloudEnabled} @arcgisSlottableRequest=${this.#g} .assistantAvatarEnabled=${this.assistantAvatarEnabled}>${t.blocks?.map((e, i) => l`<slot name=${w(t.id, i) ?? k} slot=${w(t.id, i) ?? k}><arcgis-assistant-message-block .block=${e}></arcgis-assistant-message-block></slot>`)}</arcgis-assistant-message>` : l`<arcgis-assistant-user-message .message=${t} .user=${this._user}></arcgis-assistant-user-message>`)}</slot>${this._interrupt ? l`<div slot=message-loading><div class="interrupt-waiting-message">waiting for user input...</div> // TODO: use t9n strings</div>` : l`<slot name=message-loading slot=message-loading><arcgis-assistant-message-loading .loading=${this.awaitingResponse} .loadingMessage=${this.awaitingResponseStep} .assistantAvatarEnabled=${this.assistantAvatarEnabled} .interrupts=${this._interruptDetails}></arcgis-assistant-message-loading></slot>`}</arcgis-assistant-chat></div>${this._interrupt ? l`<arcgis-assistant-interrupt slot=content-bottom .type=${this._interrupt.type} .message=${this._interrupt.message} .options=${this._interrupt.options} ${v(this.#s)}></arcgis-assistant-interrupt>` : this.suggestedPrompts?.length ? l`<div class="suggested-prompts-container" slot=content-bottom><arcgis-assistant-suggested-prompts class="suggested-prompts" .prompts=${this.suggestedPrompts}></arcgis-assistant-suggested-prompts></div>` : null}<div class="footer-container" slot=footer>${this._renderEntryMessage()}<slot name=chat-entry><arcgis-assistant-chat-entry .awaitingResponse=${this.awaitingResponse || this._isAnswering} .inputValue=${this._inputValue} .messages=${this.messages} .voiceInputEnabled=${this.voiceInputEnabled} .disabled=${this._canceling || !this._user || !!this._interrupt} ${v(this.#n)}><slot name=entry-actions-start slot=entry-actions-start></slot><slot name=entry-actions-end slot=entry-actions-end><calcite-button .iconStart=${this.awaitingResponse || this._isAnswering ? "circle-stop" : "send"} @click=${() => {
       this.#n.value?.submitMessage();
-    }} round>${this.awaitingResponse ? this._messages.stopButtonLabel : this._messages.askButtonLabel}</calcite-button></slot></arcgis-assistant-chat-entry></slot><slot name=footer-content></slot></div></calcite-panel>`;
+    }} round>${this.awaitingResponse || this._isAnswering ? this._messages.stopButtonLabel : this._messages.askButtonLabel}</calcite-button></slot></arcgis-assistant-chat-entry></slot><slot name=footer-content></slot></div></calcite-panel>`;
   }
 }
-$("arcgis-assistant", F);
+$("arcgis-assistant", Y);
 export {
-  F as ArcgisAssistant
+  Y as ArcgisAssistant
 };

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,7 +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 { ChatMessage, Interrupt } from "../arcgis-assistant/types.js";
 
 /**
  * Wraps and renders the conversation area. Use it as the container for message list content.
@@ -10,6 +10,7 @@ import type { ChatMessage } from "../arcgis-assistant/types.js";
  * @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();
       })
     ]);