@arcgis/ai-components 6.0.0-next.2 → 6.0.0-next.3

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

@@ -2,7 +2,7 @@
 import { c as L } from "../../chunks/runtime.js";
 import { css as T, html as d } from "lit";
 import M from "@arcgis/core/core/Collection.js";
-import { whenOnce as R, watch as D, when as O } from "@arcgis/core/core/reactiveUtils.js";
+import { whenOnce as O, watch as R, when as D } from "@arcgis/core/core/reactiveUtils.js";
 import U from "@arcgis/core/portal/Portal.js";
 import { LitElement as B, createEvent as b, nothing as w } from "@arcgis/lumina";
 import * as z from "@arcgis/toolkit/log";
@@ -11,14 +11,14 @@ import { createRef as E, ref as k } from "lit/directives/ref.js";
 import { u as q } from "../../chunks/useT9n.js";
 import { Orchestrator as F } from "../../orchestrator/orchestrator/orchestrator.js";
 import H from "@arcgis/core/core/Accessor.js";
-import { property as _, subclass as V } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { property as y, subclass as V } from "@arcgis/core/core/accessorSupport/decorators.js";
 import { marked as S } from "marked";
 import { g as j } from "../../chunks/utils2.js";
 import { g as I } from "../../chunks/slottableRequestUtils.js";
 import A from "@arcgis/core/identity/IdentityManager.js";
 const W = T`: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)}`;
-function $(l) {
-  return l.trim() ? S.lexer(l).filter((t) => t.type !== "space").map((t) => S.parser([t])) : [];
+function $(o) {
+  return o.trim() ? S.lexer(o).filter((t) => t.type !== "space").map((t) => S.parser([t])) : [];
 }
 class x {
   constructor() {
@@ -105,47 +105,47 @@ class x {
       "wbr"
     ]), s = /<(\/?)([a-zA-Z][\w-]*)\b[^>]*?(\/?)>/gu, i = [];
     for (let r = s.exec(t); r; r = s.exec(t)) {
-      const [, g, p, m] = r, a = p.toLowerCase();
-      if (!(e.has(a) || m === "/"))
+      const [, g, p, m] = r, n = p.toLowerCase();
+      if (!(e.has(n) || m === "/"))
         if (g === "/") {
           for (let c = i.length - 1; c >= 0; c--)
-            if (i[c].name === a) {
+            if (i[c].name === n) {
               i.splice(c);
               break;
             }
         } else
-          i.push({ name: a, index: r.index });
+          i.push({ name: n, index: r.index });
     }
     return i.length ? i[0].index : -1;
   }
 }
-function G(l) {
+function G(o) {
   const t = new x();
-  return t.push(l), t.finalize();
+  return t.push(o), t.finalize();
 }
-const Z = async (l) => await new Promise((t) => setTimeout(t, l));
-async function* J(l, { chunkSize: t = 15, delay: e = 50 } = {}) {
+const Z = async (o) => await new Promise((t) => setTimeout(t, o));
+async function* J(o, { chunkSize: t = 15, delay: e = 50 } = {}) {
   const s = new x();
-  for (let i = 0; i < l.length; i += t)
-    yield s.push(l.slice(i, i + t)), await Z(e);
+  for (let i = 0; i < o.length; i += t)
+    yield s.push(o.slice(i, i + t)), await Z(e);
   yield s.finalize();
 }
-var K = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, f = (l, t, e, s) => {
-  for (var i = s > 1 ? void 0 : s ? Q(t, e) : t, r = l.length - 1, g; r >= 0; r--)
-    (g = l[r]) && (i = (s ? g(t, e, i) : g(i)) || i);
+var K = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, _ = (o, t, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? Q(t, e) : t, r = o.length - 1, g; r >= 0; r--)
+    (g = o[r]) && (i = (s ? g(t, e, i) : g(i)) || i);
   return s && i && K(t, e, i), i;
 };
-const P = (l) => !l || typeof l != "object" ? !1 : l.name === "AbortError";
-async function* C(l, t, e, s, i = !1) {
+const P = (o) => !o || typeof o != "object" ? !1 : o.name === "AbortError";
+async function* C(o, t, e, s, i = !1) {
   if (i) {
     if (s?.aborted) {
       yield { type: "cancelled", log: e, runId: t };
       return;
     }
-    yield { type: "block-data", blockType: "text", data: { parts: G(l) }, runId: t };
+    yield { type: "block-data", blockType: "text", data: { parts: G(o) }, runId: t };
     return;
   }
-  for await (const r of J(l)) {
+  for await (const r of J(o)) {
     if (s?.aborted) {
       yield { type: "cancelled", log: e, runId: t };
       return;
@@ -154,8 +154,8 @@ async function* C(l, t, e, s, i = !1) {
   }
 }
 let u = class extends H {
-  constructor(l) {
-    super(l), this.view = null, this.streamingDisabled = !1, this.runtimeEventsEnabled = !1, this.loading = !1, this.processing = !1, this.processingStep = "";
+  constructor(o) {
+    super(o), this.view = null, this.streamingDisabled = !1, this.runtimeEventsEnabled = !1, this.loading = !1, this.processing = !1, this.processingStep = "";
   }
   async load() {
     this._set("loading", !0);
@@ -169,7 +169,7 @@ let u = class extends H {
     this.orchestrator?.dispose(), super.destroy();
   }
   async _initialize() {
-    this.removeHandles(), await Promise.all([this.portal.load(), this.view?.when()]), this.view && await R(() => !this.view.updating), this._set(
+    this.removeHandles(), await Promise.all([this.portal.load(), this.view?.when()]), this.view && await O(() => !this.view.updating), this._set(
       "orchestrator",
       await F.init({
         agents: [...this.agents],
@@ -177,7 +177,7 @@ let u = class extends H {
         view: this.view ?? void 0
       })
     ), this.addHandles([
-      D(
+      R(
         () => [this.view, this.agents],
         () => {
           this._initialize();
@@ -188,14 +188,14 @@ let u = class extends H {
   clearChatHistory() {
     this.orchestrator?.newConversation();
   }
-  async *ask(l, t, e) {
+  async *ask(o, t, e) {
     if (!this.orchestrator)
       throw new Error("Orchestrator not initialized yet.");
     this._set("processing", !0), this._set("processingStep", "");
     const s = [];
     let i, r = "pending";
     try {
-      const g = this.orchestrator.ask(l, t);
+      const g = this.orchestrator.ask(o, t);
       for await (const p of g)
         switch (r = p.runId, p.type) {
           case "runtime": {
@@ -208,27 +208,27 @@ let u = class extends H {
           }
           case "completed": {
             this._set("processing", !1), this._set("processingStep", "");
-            const m = p.result, a = !!m.content.length, c = !!i?.length;
-            if (!a && !c) {
+            const m = p.result, n = !!m.content.length, c = !!i?.length;
+            if (!n && !c) {
               yield { type: "completed", error: "No response received.", log: s, runId: r };
               return;
             }
-            const n = m.content;
-            if (yield { type: "block-start", blockType: "text", runId: r }, yield* C(n, r, s, e, this.streamingDisabled), yield { type: "block-end", blockType: "text", runId: r }, c)
-              for (const o of i) {
+            const l = m.content;
+            if (yield { type: "block-start", blockType: "text", runId: r }, yield* C(l, r, s, e, this.streamingDisabled), yield { type: "block-end", blockType: "text", runId: r }, c)
+              for (const a of i) {
                 if (e?.aborted) {
                   yield { type: "cancelled", log: s, runId: r };
                   return;
                 }
-                const { type: h, data: y } = o;
+                const { type: h, data: f } = a;
                 if (yield { type: "block-start", blockType: h, runId: r }, h === "text") {
-                  const v = typeof y?.content == "string" ? y.content : "";
+                  const v = typeof f?.content == "string" ? f.content : "";
                   yield* C(v, r, s, e, this.streamingDisabled);
                 } else
-                  yield { type: "block-data", blockType: h, data: y, runId: r };
+                  yield { type: "block-data", blockType: h, data: f, runId: r };
                 yield { type: "block-end", blockType: h, runId: r };
               }
-            yield { type: "completed", response: n, blocks: i, log: s, runId: r };
+            yield { type: "completed", response: l, blocks: i, log: s, runId: r };
             return;
           }
           case "ux-suggestion": {
@@ -237,21 +237,21 @@ let u = class extends H {
             break;
           }
           case "interrupt": {
-            const { kind: m, message: a, metadata: c } = p.interrupt, n = Array.isArray(c) ? c.filter((h) => typeof h == "string") : [], o = (() => {
+            const { kind: m, message: n, metadata: c, showOtherOption: l } = p.interrupt, a = Array.isArray(c) ? c.filter((f) => typeof f == "string") : [], h = (() => {
               switch (m) {
                 case "booleanChoice":
-                  return { type: "boolean-choice", message: a, options: n };
+                  return { type: "boolean-choice", message: n, options: a };
                 case "singleSelection":
-                  return { type: "single-select", message: a, options: n };
+                  return { type: "single-select", message: n, options: a };
                 case "multipleSelection":
-                  return { type: "multi-select", message: a, options: n };
+                  return { type: "multi-select", message: n, options: a };
                 case "textInput":
-                  return { type: "text-input", message: a };
+                  return { type: "text-input", message: n };
                 default:
-                  return { type: m, message: a, options: n };
+                  return { type: m, message: n, options: a };
               }
             })();
-            this._set("processingStep", "Waiting for user input..."), yield { type: "interrupt", payload: o, runId: r };
+            this._set("processingStep", "Waiting for user input..."), yield { type: "interrupt", payload: { ...h, showOtherOption: l }, runId: r };
             break;
           }
           case "cancelled": {
@@ -286,37 +286,37 @@ let u = class extends H {
     this.orchestrator?.cancel();
   }
 };
-f([
-  _({ readOnly: !0 })
+_([
+  y({ readOnly: !0 })
 ], u.prototype, "orchestrator", 2);
-f([
-  _()
+_([
+  y()
 ], u.prototype, "agents", 2);
-f([
-  _()
+_([
+  y()
 ], u.prototype, "portal", 2);
-f([
-  _()
+_([
+  y()
 ], u.prototype, "view", 2);
-f([
-  _()
+_([
+  y()
 ], u.prototype, "messages", 2);
-f([
-  _()
+_([
+  y()
 ], u.prototype, "streamingDisabled", 2);
-f([
-  _()
+_([
+  y()
 ], u.prototype, "runtimeEventsEnabled", 2);
-f([
-  _({ readOnly: !0 })
+_([
+  y({ readOnly: !0 })
 ], u.prototype, "loading", 2);
-f([
-  _({ readOnly: !0 })
+_([
+  y({ readOnly: !0 })
 ], u.prototype, "processing", 2);
-f([
-  _({ readOnly: !0 })
+_([
+  y({ readOnly: !0 })
 ], u.prototype, "processingStep", 2);
-u = f([
+u = _([
   V("OrchestratorController")
 ], u);
 const X = "Embeddings resource 'embeddings-v01.json' not found in the webmap portal item.", Y = "Embeddings not found for this web map.", tt = "https://developers.arcgis.com/javascript/latest/agentic-apps/ai-webmap-setup/#embeddings";
@@ -414,7 +414,7 @@ class et extends B {
       id: Date.now().toString(),
       // TODO: Replace with a more robust ID generation method or get from orchestrator
       role: "user",
-      content: e?.displayText?.trim() || s || i.map((a) => this.#f(a)).join(" "),
+      content: e?.displayText?.trim() || s || i.map((n) => this.#f(n)).join(" "),
       parts: i
     }), !this._orchestratorController))
       return;
@@ -424,22 +424,22 @@ class et extends B {
       ...r ? { routing: "direct", agentId: r } : { routing: "auto", agentIds: this.allowedAgentIds },
       locale: g
     }, m = this._orchestratorController.ask(s, p, this.#e?.signal);
-    for await (const a of m) {
-      const c = a.runId, n = this.messages.at(-1);
-      switch (a.type) {
+    for await (const n of m) {
+      const c = n.runId, l = this.messages.at(-1);
+      switch (n.type) {
         case "runtime":
-          this.arcgisRuntime.emit(a.event);
+          this.arcgisRuntime.emit(n.event);
           break;
         case "block-start": {
           this._isAnswering = !0;
-          const o = { type: a.blockType, isPending: !0 };
-          if (n?.role === "assistant" && n.id === c) {
-            const h = [...n.blocks ?? [], o];
-            this.messages.splice(-1, 1, { ...n, blocks: h });
+          const a = { type: n.blockType, isPending: !0 };
+          if (l?.role === "assistant" && l.id === c) {
+            const h = [...l.blocks ?? [], a];
+            this.messages.splice(-1, 1, { ...l, blocks: h });
           } else
             this.messages.push({
               role: "assistant",
-              blocks: [o],
+              blocks: [a],
               id: c,
               isStreaming: !0,
               interrupts: this._interruptDetails
@@ -447,58 +447,58 @@ class et extends B {
           break;
         }
         case "block-data": {
-          if (n?.role !== "assistant" || n?.id !== c)
+          if (l?.role !== "assistant" || l?.id !== c)
             break;
-          const o = [...n.blocks ?? []], h = o[o.length - 1], { blockType: y, data: v } = a;
-          if (h?.type !== y || !h.isPending)
+          const a = [...l.blocks ?? []], h = a[a.length - 1], { blockType: f, data: v } = n;
+          if (h?.type !== f || !h.isPending)
             break;
-          y === "text" ? o[o.length - 1] = {
+          f === "text" ? a[a.length - 1] = {
             ...h,
             data: {
               ...h.data,
               parts: v?.parts
             }
-          } : o[o.length - 1] = { ...h, data: { ...h.data, ...v ?? {} } }, this.messages.splice(-1, 1, { ...n, blocks: o });
+          } : a[a.length - 1] = { ...h, data: { ...h.data, ...v ?? {} } }, this.messages.splice(-1, 1, { ...l, blocks: a });
           break;
         }
         case "block-end": {
-          if (n?.role !== "assistant" || n?.id !== c)
+          if (l?.role !== "assistant" || l?.id !== c)
             break;
-          const o = [...n.blocks ?? []], h = o[o.length - 1];
-          if (h?.type !== a.blockType || !h.isPending)
+          const a = [...l.blocks ?? []], h = a[a.length - 1];
+          if (h?.type !== n.blockType || !h.isPending)
             break;
-          const y = h;
-          o[o.length - 1] = { ...y, data: { ...y.data }, isPending: !1 }, this.messages.splice(-1, 1, { ...n, blocks: o });
+          const f = h;
+          a[a.length - 1] = { ...f, data: { ...f.data }, isPending: !1 }, this.messages.splice(-1, 1, { ...l, blocks: a });
           break;
         }
         case "completed":
-          a.error ? (this.messages.push({
+          n.error ? (this.messages.push({
             role: "assistant",
-            log: a.log,
-            error: a.error,
+            log: n.log,
+            error: n.error,
             id: c,
             interrupts: this._interruptDetails
-          }), this._interruptDetails = []) : n?.role === "assistant" && n.id === c && this.messages.splice(-1, 1, {
-            ...n,
-            content: a.response,
-            blocks: n.blocks?.map((o) => ({ ...o, data: { ...o.data }, isPending: !1 })) ?? [],
+          }), this._interruptDetails = []) : l?.role === "assistant" && l.id === c && this.messages.splice(-1, 1, {
+            ...l,
+            content: n.response,
+            blocks: l.blocks?.map((a) => ({ ...a, data: { ...a.data }, isPending: !1 })) ?? [],
             isStreaming: !1,
-            log: a.log
+            log: n.log
           }), this._isAnswering = !1, this.#e = null, this._canceling = !1;
           break;
         case "interrupt":
-          this._interrupt = { ...a.payload, id: c }, this.arcgisInterrupt.emit(this._interrupt);
+          this._interrupt = { ...n.payload, id: c }, this.arcgisInterrupt.emit(this._interrupt);
           break;
         case "cancelled":
-          n?.role === "assistant" && n.id === c ? this.messages.splice(-1, 1, {
-            ...n,
-            blocks: n.blocks?.filter((o) => o.type === "text" || !o.isPending) ?? [],
+          l?.role === "assistant" && l.id === c ? this.messages.splice(-1, 1, {
+            ...l,
+            blocks: l.blocks?.filter((a) => a.type === "text" || !a.isPending) ?? [],
             isStreaming: !1,
-            log: a.log,
+            log: n.log,
             error: `(${this._messages.stoppedByUserLabel})`
           }) : (this.messages.push({
             role: "assistant",
-            log: a.log,
+            log: n.log,
             error: `(${this._messages.stoppedByUserLabel})`,
             id: c,
             interrupts: this._interruptDetails
@@ -516,7 +516,7 @@ class et extends B {
   loaded() {
     this.manager.onLifecycle(() => {
       this.#t.value?.addEventListener("arcgisPromptSelect", this.#d), this.#t.value?.addEventListener("arcgisSubmit", this.#l), this.#t.value?.addEventListener("arcgisCancel", this.#c), this.#t.value?.addEventListener("arcgisFeedback", this.#h);
-      const t = O(() => !!this._interrupt && !!this.#i.value, () => {
+      const t = D(() => !!this._interrupt && !!this.#i.value, () => {
         const s = this.#i.value;
         s.removeEventListener("arcgisSubmit", this.#n), s.removeEventListener("arcgisCancel", this.#a), s.addEventListener("arcgisSubmit", this.#n, { once: !0 }), s.addEventListener("arcgisCancel", this.#a, { once: !0 });
       }), e = this.messages.on("after-add", (s) => {
@@ -600,7 +600,7 @@ class et extends B {
     return this._error ? d`<calcite-notice slot=entry-message open kind=brand icon width=full>${this._error === X ? d`<div slot=message>${Y}</div><calcite-link slot=link .href=${tt} target=_blank title=${this._messages.learnAboutWebMapEmbeddingsLabel ?? w}>${this._messages.readMoreLabel}</calcite-link>` : d`<div slot=message>${this._error}</div>`}</calcite-notice>` : null;
   }
   render() {
-    return d`<calcite-panel .loading=${!this._orchestratorController && !this._error || this._orchestratorController?.loading} .heading=${this.heading ?? this._messages.assistantLabel} .description=${this.description} ${k(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" ? d`<arcgis-assistant-message .message=${t} .feedbackEnabled=${this.feedbackEnabled} .logEnabled=${this.logEnabled} .copyEnabled=${this.copyEnabled} .readAloudEnabled=${this.readAloudEnabled} @arcgisSlottableRequest=${this.#u} .assistantAvatarEnabled=${this.assistantAvatarEnabled}>${t.blocks?.map((e, s) => d`<slot name=${I(t.id, s) ?? w} slot=${I(t.id, s) ?? w}><arcgis-assistant-message-block .block=${e}></arcgis-assistant-message-block></slot>`)}</arcgis-assistant-message>` : d`<arcgis-assistant-user-message .message=${t} .user=${this._user} .userAvatarEnabled=${this.userAvatarEnabled}></arcgis-assistant-user-message>`)}</slot>${this._interrupt ? d`<div slot=message-loading><div class="interrupt-waiting-message">${this._messages.waitingForUserInputMessage}</div></div>` : d`<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 ? d`<slot name=interrupt><arcgis-assistant-interrupt slot=content-bottom .type=${this._interrupt.type} .message=${this._interrupt.message} .options=${this._interrupt.options} ${k(this.#i)}></arcgis-assistant-interrupt></slot>` : this.suggestedPrompts?.length ? d`<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()}${this._submissionError ? d`<div role=alert>${this._submissionError}</div>` : null}<slot name=chat-entry><arcgis-assistant-chat-entry .awaitingResponse=${this.awaitingResponse || this._isAnswering} .commandProvider=${this.commandProvider} .entityProviders=${this.entityProviders} .inputValue=${this._inputValue} .messages=${this.messages} .voiceInputEnabled=${this.voiceInputEnabled} .disabled=${this._canceling || !this._isSignedIn || !!this._interrupt || !!this._error} ${k(this.#o)}><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=${() => {
+    return d`<calcite-panel .loading=${!this._orchestratorController && !this._error || this._orchestratorController?.loading} .heading=${this.heading ?? this._messages.assistantLabel} .description=${this.description} ${k(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" ? d`<arcgis-assistant-message .message=${t} .feedbackEnabled=${this.feedbackEnabled} .logEnabled=${this.logEnabled} .copyEnabled=${this.copyEnabled} .readAloudEnabled=${this.readAloudEnabled} @arcgisSlottableRequest=${this.#u} .assistantAvatarEnabled=${this.assistantAvatarEnabled}>${t.blocks?.map((e, s) => d`<slot name=${I(t.id, s) ?? w} slot=${I(t.id, s) ?? w}><arcgis-assistant-message-block .block=${e}></arcgis-assistant-message-block></slot>`)}</arcgis-assistant-message>` : d`<arcgis-assistant-user-message .message=${t} .user=${this._user} .userAvatarEnabled=${this.userAvatarEnabled}></arcgis-assistant-user-message>`)}</slot>${this._interrupt ? d`<div slot=message-loading><div class="interrupt-waiting-message">${this._messages.waitingForUserInputMessage}</div></div>` : d`<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 ? d`<slot name=interrupt><arcgis-assistant-interrupt slot=content-bottom .type=${this._interrupt.type} .message=${this._interrupt.message} .options=${this._interrupt.options} .showOtherOption=${this._interrupt.showOtherOption ?? !1} ${k(this.#i)}></arcgis-assistant-interrupt></slot>` : this.suggestedPrompts?.length ? d`<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()}${this._submissionError ? d`<div role=alert>${this._submissionError}</div>` : null}<slot name=chat-entry><arcgis-assistant-chat-entry .awaitingResponse=${this.awaitingResponse || this._isAnswering} .commandProvider=${this.commandProvider} .entityProviders=${this.entityProviders} .inputValue=${this._inputValue} .messages=${this.messages} .voiceInputEnabled=${this.voiceInputEnabled} .disabled=${this._canceling || !this._isSignedIn || !!this._interrupt || !!this._error} ${k(this.#o)}><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.#o.value?.submitMessage();
     }} 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>`;
   }

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

@@ -39,6 +39,8 @@ export interface Interrupt {
    * If the type is `single-select`, the options could be ["Choice A", "Choice B", "Choice C"].
    */
   options?: string[];
+  /** Shows the built-in Other option for single-select and multi-select prompts. Defaults to false. */
+  showOtherOption?: boolean;
 }
 
 /** A chat message sent by the assistant. */

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

@@ -27,6 +27,12 @@ export abstract class ArcgisAssistantInterrupt extends LitElement {
   }>;
   accessor message: string | undefined;
   accessor options: string[] | undefined;
+  /**
+   * Shows the built-in Other option for single-select and multi-select prompts. Defaults to false.
+   *
+   * @default false
+   */
+  accessor showOtherOption: boolean;
   accessor type: "boolean-choice" | "multi-select" | "single-select" | "text-input";
   readonly arcgisCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly arcgisSubmit: import("@arcgis/lumina").TargetedEvent<this, string[] | boolean | string>;

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

@@ -1,27 +1,28 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as o } from "../../chunks/runtime.js";
-import { css as n, html as t } from "lit";
+import { css as n, html as e } from "lit";
 import { LitElement as h, createEvent as a, safeClassMap as u } from "@arcgis/lumina";
 import { createRef as r, ref as c } from "lit/directives/ref.js";
-import { u as d } from "../../chunks/useT9n.js";
-const p = n`:host{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)}.other-input calcite-input[disabled]{pointer-events:none}.last-option{--calcite-list-border-color: transparent}`;
+import { u as p } from "../../chunks/useT9n.js";
+const d = n`:host{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)}.other-input calcite-input[disabled]{pointer-events:none}.last-option{--calcite-list-border-color: transparent}`;
 class m extends h {
   constructor() {
-    super(...arguments), this.#t = r(), this.#e = r(), this._messages = d({ blocking: !0 }), this._selectedOptions = [], this._otherValue = "", this._otherSelected = !1, this.arcgisCancel = a(), this.arcgisSubmit = a();
+    super(...arguments), this.#e = r(), this.#t = r(), this._messages = p({ blocking: !0 }), this._selectedOptions = [], this._otherValue = "", this._otherSelected = !1, this.showOtherOption = !1, this.arcgisCancel = a(), this.arcgisSubmit = a();
   }
   static {
-    this.properties = { _selectedOptions: 16, _otherValue: 16, _otherSelected: 16, type: 1, message: 1, options: [1, { type: Array }] };
+    this.properties = { _selectedOptions: 16, _otherValue: 16, _otherSelected: 16, type: 1, message: 1, options: [1, { type: Array }], showOtherOption: 5 };
   }
   static {
-    this.styles = p;
+    this.styles = d;
   }
-  #t;
   #e;
+  #t;
   _isSubmitDisabled() {
-    return this._otherSelected ? !this._otherValue.trim() : !this._selectedOptions.length;
+    return this._otherSelected && this.showOtherOption ? !this._otherValue.trim() : !this._selectedOptions.length;
   }
   _getSubmitValue() {
-    return typeof this._selectedOptions == "string" ? this._otherSelected ? this._otherValue.trim() : this._selectedOptions : this._selectedOptions.concat(this._otherSelected ? this._otherValue.trim() : []);
+    const t = this._otherSelected && this.showOtherOption;
+    return typeof this._selectedOptions == "string" ? t ? this._otherValue.trim() : this._selectedOptions : this._selectedOptions.concat(t ? this._otherValue.trim() : []);
   }
   _getSkipValue() {
     return this.type === "multi-select" ? [] : "";
@@ -29,39 +30,39 @@ class m extends h {
   _selectOtherOption() {
     this._otherSelected || (this._otherSelected = !0, this.type !== "multi-select" && (this._selectedOptions = ""), this._focusOtherInput());
   }
-  _handleSingleSelectChange(e) {
+  _handleSingleSelectChange(t) {
     const i = this._otherSelected;
-    this._otherSelected = e.target.selectedItems[0] === this.#e.value, this._selectedOptions = this._otherSelected ? "" : e.target.selectedItems[0]?.value, this._otherSelected && !i && this._focusOtherInput();
+    this._otherSelected = t.target.selectedItems[0] === this.#t.value, this._selectedOptions = this._otherSelected ? "" : t.target.selectedItems[0]?.value, this._otherSelected && !i && this._focusOtherInput();
   }
-  _handleMultiSelectChange(e) {
-    const i = this._otherSelected, s = this.#e.value;
-    this._otherSelected = s ? e.target.selectedItems.includes(s) : !1, this._selectedOptions = e.target.selectedItems.filter((l) => l !== s).map((l) => l.value), this._otherSelected && !i && this._focusOtherInput();
+  _handleMultiSelectChange(t) {
+    const i = this._otherSelected, s = this.#t.value;
+    this._otherSelected = s ? t.target.selectedItems.includes(s) : !1, this._selectedOptions = t.target.selectedItems.filter((l) => l !== s).map((l) => l.value), this._otherSelected && !i && this._focusOtherInput();
   }
   async _focusOtherInput() {
-    await this.updateComplete, await this.#t.value?.setFocus();
+    await this.updateComplete, await this.#e.value?.setFocus();
   }
   _renderOptions() {
-    return this.options?.map((e, i) => t`<calcite-list-item class=${u({ "last-option": i === this.options.length - 1 })} .label=${e} .value=${e}></calcite-list-item>`);
+    return this.options?.map((t, i) => e`<calcite-list-item class=${u({ "last-option": i === this.options.length - 1 })} .label=${t} .value=${t}></calcite-list-item>`);
   }
   _renderOtherInput() {
-    return t`<div slot=content class="other-input" @click=${(e) => {
-      e.stopPropagation(), this._selectOtherOption();
-    }}><calcite-input .label=${this._messages.otherLabel} .placeholder=${this._messages.otherLabel} .disabled=${!this._otherSelected} @calciteInputInput=${(e) => this._otherValue = e.target.value} ${c(this.#t)}></calcite-input></div>`;
+    return e`<div slot=content class="other-input" @click=${(t) => {
+      t.stopPropagation(), this._selectOtherOption();
+    }}><calcite-input .label=${this._messages.otherLabel} .placeholder=${this._messages.otherLabel} .disabled=${!this._otherSelected} @calciteInputInput=${(t) => this._otherValue = t.target.value} ${c(this.#e)}></calcite-input></div>`;
   }
   _renderInterruptOptions() {
     switch (this.type) {
       case "single-select":
-        return t`<calcite-list selection-mode=single-persist .label=${this._messages.optionsLabel} @calciteListChange=${(e) => this._handleSingleSelectChange(e)}>${this._renderOptions()}<calcite-list-item .selected=${this._otherSelected} ${c(this.#e)}>${this._renderOtherInput()}</calcite-list-item></calcite-list>`;
+        return e`<calcite-list selection-mode=single-persist .label=${this._messages.optionsLabel} @calciteListChange=${(t) => this._handleSingleSelectChange(t)}>${this._renderOptions()}${this.showOtherOption ? e`<calcite-list-item .selected=${this._otherSelected} ${c(this.#t)}>${this._renderOtherInput()}</calcite-list-item>` : null}</calcite-list>`;
       case "multi-select":
-        return t`<calcite-list selection-mode=multiple .label=${this._messages.optionsLabel} @calciteListChange=${(e) => this._handleMultiSelectChange(e)}>${this._renderOptions()}<calcite-list-item .selected=${this._otherSelected} ${c(this.#e)}>${this._renderOtherInput()}</calcite-list-item></calcite-list>`;
+        return e`<calcite-list selection-mode=multiple .label=${this._messages.optionsLabel} @calciteListChange=${(t) => this._handleMultiSelectChange(t)}>${this._renderOptions()}${this.showOtherOption ? e`<calcite-list-item .selected=${this._otherSelected} ${c(this.#t)}>${this._renderOtherInput()}</calcite-list-item>` : null}</calcite-list>`;
       case "boolean-choice":
         return null;
       case "text-input":
-        return t`<calcite-input .label=${this._messages.enterTextLabel} @calciteInputInput=${(e) => this._selectedOptions = e.target.value}></calcite-input>`;
+        return e`<calcite-input .label=${this._messages.enterTextLabel} @calciteInputInput=${(t) => this._selectedOptions = t.target.value}></calcite-input>`;
     }
   }
   render() {
-    return t`<calcite-panel .description=${this.message}><div class="interrupt-content">${this._renderInterruptOptions()}</div>${this.type === "boolean-choice" ? t`<calcite-button slot=footer-end appearance=outline @click=${() => this.arcgisSubmit.emit(!1)}>${this._messages.declineButtonLabel}</calcite-button><calcite-button slot=footer-end appearance=solid @click=${() => this.arcgisSubmit.emit(!0)}>${this._messages.approveButtonLabel}</calcite-button>` : t`<calcite-button slot=footer-end appearance=outline @click=${() => this.arcgisSubmit.emit(this._getSkipValue())}>${this._messages.skipButtonLabel}</calcite-button><calcite-button slot=footer-end appearance=solid .disabled=${this._isSubmitDisabled()} @click=${() => this.arcgisSubmit.emit(this._getSubmitValue())}>${this._messages.submitButtonLabel}</calcite-button>`}</calcite-panel>`;
+    return e`<calcite-panel .description=${this.message}><div class="interrupt-content">${this._renderInterruptOptions()}</div>${this.type === "boolean-choice" ? e`<calcite-button slot=footer-end appearance=outline @click=${() => this.arcgisSubmit.emit(!1)}>${this._messages.declineButtonLabel}</calcite-button><calcite-button slot=footer-end appearance=solid @click=${() => this.arcgisSubmit.emit(!0)}>${this._messages.approveButtonLabel}</calcite-button>` : e`<calcite-button slot=footer-end appearance=outline @click=${() => this.arcgisSubmit.emit(this._getSkipValue())}>${this._messages.skipButtonLabel}</calcite-button><calcite-button slot=footer-end appearance=solid .disabled=${this._isSubmitDisabled()} @click=${() => this.arcgisSubmit.emit(this._getSubmitValue())}>${this._messages.submitButtonLabel}</calcite-button>`}</calcite-panel>`;
   }
 }
 o("arcgis-assistant-interrupt", m);