@arcgis/ai-components 5.1.0-next.11 → 5.1.0-next.111

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

@@ -1,26 +1,27 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as _ } from "../../chunks/runtime.js";
-import { css as v, html as u } from "lit";
-import b from "@arcgis/core/core/Collection.js";
-import { whenOnce as w, watch as E, when as C } from "@arcgis/core/core/reactiveUtils.js";
-import $ from "@arcgis/core/portal/Portal.js";
-import { LitElement as k, createEvent as n } from "@arcgis/lumina";
-import { createRef as m, ref as y } from "lit/directives/ref.js";
-import { Orchestrator as S } from "@arcgis/ai-orchestrator";
-import L from "@arcgis/core/core/Accessor.js";
-import { property as h, subclass as I } from "@arcgis/core/core/accessorSupport/decorators.js";
-import { g as P } from "../../chunks/utils2.js";
-import { u as O } from "../../chunks/useT9n.js";
-import { rethrowError as M } from "@arcgis/toolkit/log";
-const x = v`:host{display:block;width:var(--arcgis-internal-panel-width, 100%);height:var(--arcgis-internal-expand-max-height, 100%)}`;
-var A = Object.defineProperty, R = Object.getOwnPropertyDescriptor, l = (c, t, e, i) => {
-  for (var s = i > 1 ? void 0 : i ? R(t, e) : t, r = c.length - 1, o; r >= 0; r--)
-    (o = c[r]) && (s = (i ? o(t, e, s) : o(s)) || s);
-  return i && s && A(t, e, s), s;
+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 { u as M } from "../../chunks/useT9n.js";
+import { Orchestrator as O } from "@arcgis/ai-orchestrator";
+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/utils2.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 = (g, t, e, i) => {
+  for (var s = i > 1 ? void 0 : i ? j(t, e) : t, r = g.length - 1, n; r >= 0; r--)
+    (n = g[r]) && (s = (i ? n(t, e, s) : n(s)) || s);
+  return i && s && N(t, e, s), s;
 };
-let a = class extends L {
-  constructor(c) {
-    super(c), this.view = null, this.loading = !1, this.processing = !1, this.processingStep = "";
+let l = class extends A {
+  constructor(g) {
+    super(g), this.view = null, this.loading = !1, this.processing = !1, this.processingStep = "";
   }
   async load() {
     this._set("loading", !0);
@@ -34,166 +35,207 @@ let a = class extends L {
     this.orchestrator?.dispose(), super.destroy();
   }
   async _initialize() {
-    this.removeHandles(), await Promise.all([this.portal.load(), this.view?.when()]), this.view && await w(() => !this.view.updating), this._set(
+    this.removeHandles(), await Promise.all([this.portal.load(), this.view?.when()]), this.view && await C(() => !this.view.updating), this._set(
       "orchestrator",
-      await S.init({
+      await O.init({
         agents: [...this.agents],
         view: this.view ?? void 0
       })
     ), this.addHandles([
-      E(
+      L(
         () => [this.view, this.agents],
-        () => void this._initialize()
+        () => {
+          this._initialize();
+        }
       )
     ]);
   }
-  async *ask(c, t) {
+  clearChatHistory() {
+    this.orchestrator?.newConversation();
+  }
+  async *ask(g, t) {
     if (!this.orchestrator)
       throw new Error("Orchestrator not initialized yet.");
     this._set("processing", !0), this._set("processingStep", "");
     const e = [];
+    let i;
     try {
-      const i = this.orchestrator.ask(c);
-      for await (const s of i) {
-        const r = s.runId;
+      const s = this.orchestrator.ask(g);
+      for await (const r of s) {
+        const n = r.runId;
         if (t?.aborted) {
-          yield { type: "cancelled", runId: r };
+          yield { type: "cancelled", runId: n };
           break;
         }
-        switch (s.type) {
+        switch (r.type) {
           case "trace": {
-            this._set("processingStep", s.data.text), e.push(s.data.text);
+            this._set("processingStep", r.data.text), e.push(r.data.text);
             break;
           }
           case "completed": {
-            if (!s.result.content.length) {
-              yield { type: "completed", error: "Could not process the request.", log: e, runId: r };
+            const c = r.result, p = !!c.content.length, m = !!i?.length;
+            if (!p && !m) {
+              yield { type: "completed", error: "Could not process the request.", log: e, runId: n };
               return;
             }
-            const o = s.result.content;
-            this._set("processingStep", ""), yield { type: "completed", response: o, log: e, runId: r };
+            const d = c.content;
+            this._set("processingStep", ""), yield { type: "completed", response: d, blocks: i, log: e, runId: n };
             return;
           }
+          case "ux-suggestion": {
+            const c = r.suggestion;
+            i = i ? [...i, c] : [c];
+            break;
+          }
           case "interrupt": {
-            const { kind: o, message: p, metadata: d } = s.interrupt, g = Array.isArray(d) ? [...d] : [], f = (() => {
-              switch (o) {
+            const { kind: c, message: p, metadata: m } = r.interrupt, d = Array.isArray(m) ? m.filter((E) => typeof E == "string") : [], w = (() => {
+              switch (c) {
                 case "booleanChoice":
-                  return { type: "boolean-choice", message: p, options: g };
+                  return { type: "boolean-choice", message: p, options: d };
                 case "singleSelection":
-                  return { type: "single-select", message: p, options: g };
+                  return { type: "single-select", message: p, options: d };
                 case "multipleSelection":
-                  return { type: "multi-select", message: p, options: g };
+                  return { type: "multi-select", message: p, options: d };
                 case "textInput":
                   return { type: "text-input", message: p };
                 default:
-                  return { type: o, message: p, options: g };
+                  return { type: c, message: p, options: d };
               }
             })();
-            this._set("processingStep", "Waiting for user input..."), yield { type: "interrupt", payload: f, runId: r };
+            this._set("processingStep", "Waiting for user input..."), yield { type: "interrupt", payload: w, runId: n };
             break;
           }
           case "cancelled": {
-            yield { type: "cancelled", runId: r };
+            yield { type: "cancelled", runId: n };
+            return;
+          }
+          case "error": {
+            yield { type: "completed", error: r.error.message, log: e, runId: n };
             return;
           }
           default: {
-            console.warn("Unknown event type:", s);
+            console.warn("Unknown event type:", r);
             break;
           }
         }
       }
-    } catch (i) {
-      console.warn("Error during message processing:", i), yield { type: "completed", error: "An error occurred during message processing.", log: e, runId: "error" };
+    } catch (s) {
+      console.warn("Error during message processing:", s), yield { type: "completed", error: "An error occurred during message processing.", log: e, runId: "error" };
       return;
     } finally {
       this._set("processing", !1);
     }
   }
 };
-l([
-  h({ readOnly: !0 })
-], a.prototype, "orchestrator", 2);
-l([
-  h()
-], a.prototype, "agents", 2);
-l([
-  h()
-], a.prototype, "portal", 2);
-l([
-  h()
-], a.prototype, "view", 2);
-l([
-  h({ readOnly: !0 })
-], a.prototype, "loading", 2);
-l([
-  h({ readOnly: !0 })
-], a.prototype, "processing", 2);
-l([
-  h({ readOnly: !0 })
-], a.prototype, "processingStep", 2);
-a = l([
-  I("OrchestratorController")
-], a);
-class z extends k {
+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 {
   constructor() {
-    super(...arguments), this._messages = O({ blocking: !0 }), this.#t = m(), this.#e = m(), this.#s = null, this.#o = /* @__PURE__ */ new Map(), this.#r = $.getDefault(), this.#i = (t) => {
-      t.stopPropagation(), this.arcgisInterruptCancel.emit(), this.orchestrator?.cancelInterrupt(), this._interrupt = null;
+    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) => {
+      t.stopPropagation(), this.cancelInterrupt();
     }, this.#a = (t) => {
       t.stopPropagation();
       const e = t.detail;
-      this.arcgisInterruptSubmit.emit(e), this.orchestrator?.resumeInterrupt(e), this._interrupt = null;
-    }, this.#n = (t) => {
-      t.stopPropagation(), this.suggestedPrompts = [];
-      const e = t.detail;
-      this.arcgisSubmit.emit(e), this.submitMessage(e);
+      this.submitInterrupt(e);
     }, this.#l = (t) => {
+      t.stopPropagation(), this.keepSuggestedPrompts || (this.suggestedPrompts = []);
+      const e = t.detail;
+      this._inputValue = "", this.arcgisSubmit.emit(e), this.submitMessage(e);
+    }, this.#c = (t) => {
       if (t.stopPropagation(), this.arcgisCancel.emit(), this._interrupt) {
         this.orchestrator?.cancelInterrupt(), this._interrupt = null;
         return;
       }
       this.#s?.abort();
-    }, this.#c = (t) => {
+    }, this.#h = (t) => {
       t.stopPropagation();
       const e = t.detail;
       this.arcgisFeedback.emit(e);
-    }, this._orchestratorController = null, this._interrupt = null, this._error = null, this.messages = new b([]), this.referenceElement = null, this.suggestedPrompts = [], this.feedbackEnabled = !1, this.logEnabled = !1, this.copyEnabled = !1, this.arcgisCancel = n(), this.arcgisError = n(), this.arcgisFeedback = n(), this.arcgisInterrupt = n(), this.arcgisInterruptCancel = n(), this.arcgisInterruptSubmit = n(), this.arcgisReady = n(), this.arcgisSubmit = n();
+    }, this.#g = (t) => {
+      t.stopPropagation();
+      const e = t.detail;
+      this._inputValue = e.prompt, this.arcgisPromptSelect.emit(e);
+    }, this.#p = (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 });
   }
   static {
-    this.properties = { _orchestratorController: 16, _interrupt: 16, _error: 16, _user: 16, messages: 0, orchestrator: 32, entryMessage: 1, heading: 1, description: 1, referenceElement: 1, suggestedPrompts: 0, feedbackEnabled: 5, logEnabled: 5, copyEnabled: 5 };
+    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 };
   }
   static {
-    this.styles = x;
+    this.styles = V;
   }
   #t;
+  #n;
   #e;
   #s;
   #o;
   #r;
   #i;
   #a;
-  #n;
   #l;
   #c;
-  async #h() {
+  #h;
+  #g;
+  #p;
+  async #u() {
     try {
-      const t = P(this.el, this.referenceElement);
+      const t = z(this.el, this.referenceElement);
       await t?.componentOnReady();
       const e = [...this.#o.values()];
-      return e.length ? (this._orchestratorController = new a({
+      return e.length ? (this._orchestratorController = new l({
         agents: e,
         portal: this.#r,
         view: t?.view
       }), await this._orchestratorController.load(), !0) : (this._error = "No agents found.", !1);
     } catch (t) {
-      return this._error = t?.message ?? "Error initializing orchestrator.", M(this)(t), !1;
+      return this._error = t?.message ?? "Error initializing orchestrator.", x(this)(t), !1;
     }
   }
   get _user() {
     return this.#r?.user?.fullName || this.#r?.user?.username;
   }
+  get awaitingResponse() {
+    return this._orchestratorController?.processing ?? !1;
+  }
+  get awaitingResponseStep() {
+    return this._orchestratorController?.processingStep ?? "";
+  }
+  get interrupt() {
+    return this._interrupt;
+  }
   get orchestrator() {
     return this._orchestratorController?.orchestrator;
   }
+  async clearChatHistory() {
+    this._reset(), this._orchestratorController?.clearChatHistory();
+  }
+  cancelInterrupt() {
+    this.arcgisInterruptCancel.emit(), this.orchestrator?.cancelInterrupt(), this._interrupt = null;
+  }
   register(t) {
     this.#o.set(t.agent.id, t);
   }
@@ -206,8 +248,7 @@ class z extends k {
       content: e
     }), !this._orchestratorController))
       return;
-    this.#s = new AbortController();
-    const i = this._orchestratorController.ask(e, this.#s.signal);
+    const i = this._orchestratorController.ask(e, this.#s?.signal);
     for await (const s of i) {
       const r = s.runId;
       switch (s.type) {
@@ -215,13 +256,14 @@ class z extends k {
           this.messages.push({
             role: "assistant",
             content: s.response,
+            blocks: s.blocks,
             log: s.log,
             error: s.error,
             id: r
           });
           break;
         case "interrupt":
-          this._interrupt = { ...s.payload, id: r };
+          this._interrupt = { ...s.payload, id: r }, this.arcgisInterrupt.emit(this._interrupt);
           break;
         case "cancelled":
           this.messages.push({
@@ -233,32 +275,47 @@ class z extends k {
       }
     }
   }
+  submitInterrupt(t) {
+    this.arcgisInterruptSubmit.emit(t), this.orchestrator?.resumeInterrupt(t), this._interrupt = null;
+  }
   load() {
-    this.manager.onLifecycle(() => () => {
-      this.#s?.abort(), this._interrupt = null, this.messages.removeAll(), this._error = null;
-    });
+    this.manager.onLifecycle(this._reset.bind(this));
   }
   loaded() {
     this.manager.onLifecycle(() => {
-      this.#t.value?.addEventListener("arcgisSubmit", this.#n), this.#t.value?.addEventListener("arcgisCancel", this.#l), this.#t.value?.addEventListener("arcgisFeedback", this.#c);
-      const t = C(() => !!this._interrupt && !!this.#e.value, () => {
+      this.#t.value?.addEventListener("arcgisPromptSelect", this.#g), 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 }), this._interrupt && this.arcgisInterrupt.emit(this._interrupt);
+        e.removeEventListener("arcgisSubmit", this.#a), e.removeEventListener("arcgisCancel", this.#i), e.addEventListener("arcgisSubmit", this.#a, { once: !0 }), e.addEventListener("arcgisCancel", this.#i, { once: !0 });
       });
       return queueMicrotask(() => {
-        this.#h().then((e) => {
-          e ? this.arcgisReady.emit() : this.arcgisError.emit(new Error(this._error || "Unknown error initializing assistant."));
+        this.#u().then((e) => {
+          e ? this.arcgisReady.emit() : this._error && this.arcgisError.emit(new Error(this._error));
         });
       }), () => {
-        t.remove(), this.#e.value?.removeEventListener("arcgisSubmit", this.#a), this.#e.value?.removeEventListener("arcgisCancel", this.#i), this.#t.value?.removeEventListener("arcgisSubmit", this.#n), this.#t.value?.removeEventListener("arcgisCancel", this.#l), this.#t.value?.removeEventListener("arcgisFeedback", this.#c), this._orchestratorController?.destroy(), this._orchestratorController = null;
+        t.remove(), this.#t.value?.removeEventListener("arcgisPromptSelect", this.#g), 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;
       };
     });
   }
+  _reset() {
+    this.#s?.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>`;
+  }
+  _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;
+  }
+  _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;
+  }
   render() {
-    return u`<arcgis-assistant-shell .loading=${!this._orchestratorController && !this._error || this._orchestratorController?.loading} .heading=${this.heading ?? this._messages.assistantLabel} .description=${this.description} .entryMessage=${this.entryMessage} .entryMessageClosed=${this.messages.length > 0} .awaitingResponse=${this._orchestratorController?.processing} .suggestedPrompts=${this.suggestedPrompts} .messages=${this.messages} ${y(this.#t)}>${this._error ? u`<calcite-notice slot=entry-message open kind=danger icon width=full><div slot=message>${this._error}</div></calcite-notice>` : null}${this._interrupt ? u`<arcgis-assistant-interrupt slot=entry-message .type=${this._interrupt.type} .message=${this._interrupt.message} .options=${this._interrupt.options} ${y(this.#e)}></arcgis-assistant-interrupt>` : null}<arcgis-assistant-chat .loading=${this._orchestratorController?.processing} .loadingMessage=${this._orchestratorController?.processingStep || ""} .messages=${this.messages} .user=${this._user} .feedbackEnabled=${this.feedbackEnabled} .logEnabled=${this.logEnabled} .copyEnabled=${this.copyEnabled}><slot></slot><slot name=chat-card-footer-actions-start slot=chat-card-footer-actions-start></slot><slot name=chat-card-footer-actions-end slot=chat-card-footer-actions-end></slot></arcgis-assistant-chat><slot name=header-actions-end slot=header-actions-end></slot>${this.entryMessage ? null : u`<slot name=entry-message slot=entry-message></slot>`}<slot name=entry-actions-start slot=entry-actions-start></slot><slot name=footer-content slot=footer-content></slot></arcgis-assistant-shell>`;
+    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.#p}><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=${() => {
+      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>`;
   }
 }
-_("arcgis-assistant", z);
+$("arcgis-assistant", F);
 export {
-  z as ArcgisAssistant
+  F as ArcgisAssistant
 };

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

@@ -1,5 +1,14 @@
-import "../arcgis-assistant-shell/index.js";
-import "@esri/calcite-components/components/calcite-notice";
 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-chat-entry/index.js";
+import "@esri/calcite-components/components/calcite-button";
 export * from "./customElement.js";

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

@@ -1,29 +1,134 @@
+import type { UXSuggestion } from "@arcgis/ai-orchestrator";
+
+/** An interrupt is a UI mechanism used by an agent to prompt the user for additional input or clarification. */
 export interface Interrupt {
+  /**
+   * The unique identifier of the message associated with the interrupt. This is used to associate the interrupt
+   * with specific messages.
+   */
   id?: string;
+  /**
+   * The type of interrupt, which determines how the assistant will prompt the user for input. The available types are:
+   *
+   * - `boolean-choice`: Presents the user with a yes/no question.
+   * - `multi-select`: Allows the user to select multiple options from a list using a checkbox interface.
+   * - `single-select`: Allows the user to select a single option from a list using a radio button interface.
+   * - `text-input`: Prompts the user to enter free-form text input.
+   *
+   * The assistant will use the specified type to determine how to display the prompt and collect the user's response.
+   * For example, a `boolean-choice` interrupt might be used to confirm an action, while a `text-input`
+   * interrupt could be used to ask for more details about a request.
+   */
   type: "boolean-choice" | "multi-select" | "single-select" | "text-input";
+  /**
+   * The message to display to the user when prompting for input. This should provide clear instructions or questions
+   * related to the interrupt, guiding the user on what information is needed or what action they should take in response
+   * to the prompt.
+   *
+   * For example, if the interrupt type is `boolean-choice`, the message might be "Do you want to proceed with this
+   * action?" If the type is `text-input`, the message could be "Please provide more details about your request."
+   */
   message?: string;
+  /**
+   * The options to present to the user for selection when the interrupt type is `multi-select` or `single-select`.
+   * This should be an array of strings representing the available choices. For `boolean-choice`,
+   * the options are implicitly "Yes" and "No" and do not need to be provided.
+   * For `text-input`, options are not applicable and should be omitted.
+   *
+   * For example, if the interrupt type is `multi-select`, the options might be ["Option 1", "Option 2", "Option 3"].
+   * If the type is `single-select`, the options could be ["Choice A", "Choice B", "Choice C"].
+   */
   options?: string[];
 }
 
+/** A chat message sent by the assistant. */
 export interface AssistantMessage extends ChatMessageBase {
   role: "assistant";
+  /** The content of the assistant's message. This can include text generated by the assistant in response to the user's message. The content is displayed in the chat interface for the user to read and interact with. */
   content?: string;
+  /**
+   * Structured response UI blocks associated with the assistant message. These blocks are rendered as interactive
+   * 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[];
+  /**
+   * 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
+   * arrived at its response. Log messages are primarily intended for debugging and transparency purposes, allowing
+   * developers and users to understand the assistant's behavior and decision-making process.
+   */
   log?: string[];
+  /**
+   * An error message indicating any issues that occurred while the assistant was processing the user's request.
+   * The error message may be displayed in the chat interface to inform the user of the issue and can also be used for
+   * debugging and improving the assistant's performance.
+   */
   error?: string;
+  /**
+   * Feedback provided by the user for this specific assistant message. This allows users to indicate whether the
+   * assistant's response was helpful or not, which the app developer can capture and use to improve the assistant's
+   * performance over time.
+   */
   feedback?: Feedback;
 }
 
+/**
+ * A chat message from the user or the assistant. Messages include all relevant information such as content,
+ * logs, errors, and feedback.
+ */
 export type ChatMessage = AssistantMessage | UserMessage;
 
-export interface Feedback {
-  positive: boolean;
-}
+/** Detail payload emitted when a suggested prompt is selected. */
+export type AssistantPromptSelectDetail = {
+  /** The selected suggested prompt value. */
+  prompt: string;
+};
+
+/** Detail payload emitted by the assistant slottable request event. */
+export type AssistantSlottableRequestDetail = {
+  /** The request name describing the slot being requested. */
+  name: AssistantSlottableRequestName;
+  /** The slot name consumers should target when appending light DOM content. */
+  slotName: string;
+  /** Data describing the current slot request. */
+  data?: AssistantSlottableRequestData;
+};
 
+/** The base interface for chat messages exchanged between the user and the assistant. */
 export interface ChatMessageBase {
+  /**
+   * The unique identifier for the message. This is used to associate messages with interrupts and feedback.
+   * If not provided, a unique ID will be generated automatically.
+   */
   id: string;
 }
 
+/** A chat message sent by the user. */
 export interface UserMessage extends ChatMessageBase {
   role: "user";
+  /**
+   * The content of the user's message. This is the text input provided by the user in the chat interface.
+   * This content is sent to the assistant and its agents for processing and generating responses.
+   */
   content: string;
-}
+}
+
+/** Feedback provided by the user for a specific message. */
+export interface Feedback {
+  /** Indicates whether the feedback is positive or negative. */
+  positive: boolean;
+}
+
+/** Data emitted with an assistant slottable request. */
+export type AssistantSlottableRequestData = {
+  /** The assistant message associated with the slot request. */
+  message: AssistantMessage;
+  /** The block associated with the slot request, when requesting block content. */
+  block?: UXSuggestion;
+  /** Zero-based index of the block associated with the slot request. */
+  index?: number;
+};
+
+/** Supported assistant slottable request names. */
+export type AssistantSlottableRequestName = "block" | "message";