@arcgis/ai-components 5.2.0-next.113 → 5.2.0-next.115

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

@@ -98,6 +98,112 @@ export type AssistantPromptSelectDetail = {
   prompt: string;
 };
 
+/**
+ * A command selected in an assistant submission.
+ * A submission can contain at most one command.
+ *
+ * @internal
+ */
+export type AssistantCommandInputPart = Readonly<{
+    kind: "command";
+    id: string;
+    label: string;
+    agentId?: string;
+    requiresText?: boolean;
+    data?: unknown;
+}>;
+
+/**
+ * A selectable command returned by an assistant command provider.
+ *
+ * @internal
+ */
+export type AssistantCommandSuggestion = Readonly<{
+    id: string;
+    label: string;
+    description?: string;
+    agentId?: string;
+    requiresText?: boolean;
+    data?: unknown;
+}>;
+
+/**
+ * Provides suggestions for the reserved `/` command trigger in the assistant chat entry.
+ *
+ * @internal
+ */
+export type AssistantCommandProvider = Readonly<{ getSuggestions: (query: string, signal: AbortSignal) => Promise<readonly AssistantCommandSuggestion[]> | readonly AssistantCommandSuggestion[]; }>;
+
+/**
+ * An entity selected in an assistant submission.
+ *
+ * @internal
+ */
+export type AssistantEntityInputPart = Readonly<{
+    kind: "entity";
+    providerId: string;
+    trigger: string;
+    id: string;
+    label: string;
+    data?: unknown;
+}>;
+
+/**
+ * A selectable entity returned by an assistant entity provider.
+ *
+ * @internal
+ */
+export type AssistantEntitySuggestion = Readonly<{
+    id: string;
+    label: string;
+    description?: string;
+    data?: unknown;
+}>;
+
+/**
+ * Provides entity suggestions for a trigger in the assistant chat entry.
+ * The `/` trigger is reserved for commands.
+ * Selected entities remain in the submitted prompt and do not affect agent routing.
+ *
+ * @internal
+ */
+export type AssistantEntityProvider = Readonly<{
+    id: string;
+    trigger: string;
+    getSuggestions: (query: string, signal: AbortSignal) => Promise<readonly AssistantEntitySuggestion[]> | readonly AssistantEntitySuggestion[];
+}>;
+
+/**
+ * Structured input submitted with an assistant request.
+ *
+ * @internal
+ */
+export type AssistantInputPart = AssistantCommandInputPart | AssistantEntityInputPart;
+
+/**
+ * Options for submitting an assistant message.
+ * Requests with parts but no message text require a command with an `agentId` or an explicitly selected agent through
+ * `alwaysUseAgentId`.
+ * Parts are scoped to this request; they are not persisted in message history.
+ *
+ * @internal
+ */
+export type SubmitMessageOptions = Readonly<{
+    parts?: readonly AssistantInputPart[];
+    displayText?: string;
+}>;
+
+/**
+ * A snapshot of an assistant submission, separating execution text from display text.
+ *
+ * @internal
+ */
+export type AssistantSubmission = Readonly<{
+    prompt: string;
+    displayText: string;
+    parts: readonly AssistantInputPart[];
+}>;
+
 /** Detail payload emitted by the assistant slottable request event. */
 export type AssistantSlottableRequestDetail = {
   /** The request name describing the slot being requested. */
@@ -125,6 +231,8 @@ export interface UserMessage extends ChatMessageBase {
    * This content is sent to the assistant and its agents for processing and generating responses.
    */
   content: string;
+  /** Structured input parts submitted with the message. */
+  parts?: readonly AssistantInputPart[];
 }
 
 /** Feedback provided by the user for a specific message. */

package/dist/components/arcgis-assistant-chat-entry/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 { AssistantCommandProvider, AssistantEntityProvider, AssistantSubmission, ChatMessage } from "../arcgis-assistant/types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
@@ -13,13 +13,24 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  */
 export abstract class ArcgisAssistantChatEntry extends LitElement {
   /** @internal */
-  protected _messages: { entryPlaceholder: string; } & T9nMeta<{ entryPlaceholder: string; }>;
+  protected _messages: {
+      entryPlaceholder: string;
+      loadingSuggestions: string;
+      textRequired: string;
+      suggestions: string;
+  } & T9nMeta<{
+      entryPlaceholder: string;
+      loadingSuggestions: string;
+      textRequired: string;
+      suggestions: string;
+  }>;
   /** @default false */
   accessor awaitingResponse: boolean;
+  accessor commandProvider: AssistantCommandProvider | undefined;
   /** @default false */
   accessor disabled: boolean;
+  accessor entityProviders: readonly AssistantEntityProvider[];
   accessor entryPlaceholder: string | undefined;
-  /** @default "" */
   accessor inputValue: string;
   /** @default false */
   accessor keyboardShortcutsDisabled: boolean;
@@ -29,7 +40,7 @@ export abstract class ArcgisAssistantChatEntry extends LitElement {
   accessor voiceInputEnabled: boolean;
   submitMessage(): Promise<void>;
   readonly arcgisCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
-  readonly arcgisSubmit: import("@arcgis/lumina").TargetedEvent<this, string>;
+  readonly arcgisSubmit: import("@arcgis/lumina").TargetedEvent<this, AssistantSubmission | string>;
   readonly "@eventTypes": {
     arcgisCancel: ArcgisAssistantChatEntry["arcgisCancel"]["detail"];
     arcgisSubmit: ArcgisAssistantChatEntry["arcgisSubmit"]["detail"];

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

@@ -1,71 +1,366 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as d } from "../../chunks/runtime.js";
-import { css as p, html as c } from "lit";
-import { LitElement as f, createEvent as l, safeClassMap as g } from "@arcgis/lumina";
-import { createRef as u, ref as h } from "lit/directives/ref.js";
-import { u as m } from "../../chunks/useT9n.js";
-import y from "@arcgis/core/core/Collection.js";
-import { classes as v } from "@arcgis/toolkit/dom";
-const b = p`:host{--calcite-text-area-border-color: var(--calcite-color-border-1);--calcite-text-area-divider-color: var(--calcite-color-border-1);--calcite-text-area-corner-radius: var(--calcite-border-radius)}.input-container{display:flex;flex-direction:column}.footer-start{display:flex;gap:var(--calcite-spacing-md);flex-wrap:wrap;align-items:center}.footer-end{display:flex;gap:var(--calcite-spacing-md);align-items:center}.status-indicator{width:9px;height:9px;border-radius:100%;background-color:var(--calcite-color-status-success)}.status-indicator[data-status=working]{background-color:var(--calcite-color-status-warning)}.status-indicator[data-status=error]{background-color:var(--calcite-color-status-danger)}.status-text{text-transform:capitalize}.focused{--calcite-text-area-shadow: var(--calcite-shadow-sm)}`;
-class w extends f {
+import { c as b } from "../../chunks/runtime.js";
+import { css as S, html as g } from "lit";
+import { LitElement as w, createEvent as f, safeClassMap as _ } from "@arcgis/lumina";
+import { createRef as m, ref as v } from "lit/directives/ref.js";
+import { u as $ } from "../../chunks/useT9n.js";
+import I from "@arcgis/core/core/Collection.js";
+const k = S`:host{--calcite-text-area-border-color: var(--calcite-color-border-1);--calcite-text-area-divider-color: var(--calcite-color-border-1);--calcite-text-area-corner-radius: var(--calcite-border-radius)}.input-container{display:flex;flex-direction:column}.footer-start{display:flex;gap:var(--calcite-spacing-md);flex-wrap:wrap;align-items:center}.footer-end{display:flex;gap:var(--calcite-spacing-md);align-items:center}.focused{--calcite-text-area-shadow: var(--calcite-shadow-sm)}.suggestions-loading{padding:var(--calcite-spacing-sm)}`, q = {
+  suggestions: [],
+  loading: !1,
+  selectedIndex: 0
+};
+function y(d) {
+  return d.filter(({ trigger: t }) => t !== "" && t !== "/").sort((t, e) => e.trigger.length - t.trigger.length);
+}
+class P {
+  constructor(t) {
+    this._onStateChange = t;
+  }
+  #t = null;
+  #o;
+  #e = q;
+  get state() {
+    return this.#e;
+  }
+  get activeSuggestion() {
+    return this.#o;
+  }
+  get selectedSuggestion() {
+    return this.#e.suggestions[this.#e.selectedIndex];
+  }
+  moveSelection(t) {
+    this.#r({
+      selectedIndex: Math.max(0, Math.min(this.#e.selectedIndex + t, this.#e.suggestions.length - 1))
+    });
+  }
+  async update(t, e, i) {
+    this.#t?.abort();
+    const s = this.#i(t, e, i);
+    if (!s) {
+      this.close();
+      return;
+    }
+    const n = new AbortController();
+    this.#t = n, this.#o = s, this.#r({ suggestions: [], loading: !0, selectedIndex: 0 });
+    try {
+      const o = await s.provider.getSuggestions(
+        s.query,
+        n.signal
+      );
+      if (n.signal.aborted || this.#t !== n)
+        return;
+      this.#r({
+        suggestions: o,
+        loading: !1,
+        selectedIndex: 0
+      });
+    } catch {
+      n.signal.aborted || this.close();
+    }
+  }
+  async resolveTypedInputs(t, e, i, s) {
+    const n = await this.#s(t, e.commandProvider, i, s);
+    return s.aborted ? [] : (n.push(...await this.#a(t, e.entityProviders, i, s)), n);
+  }
+  close() {
+    this.#t?.abort(), this.#t = null, this.#o = void 0, this.#r({ suggestions: [], loading: !1, selectedIndex: 0 });
+  }
+  #i(t, e, i) {
+    if (e == null)
+      return;
+    const s = t.slice(0, e), n = s.slice(1);
+    if (i.commandProvider && s.startsWith("/") && !/\s/u.test(n))
+      return { kind: "command", provider: i.commandProvider, start: 0, end: e, query: n };
+    const o = y(i.entityProviders);
+    for (const r of o) {
+      const l = s.lastIndexOf(r.trigger), a = s.slice(l + r.trigger.length);
+      if (l !== -1 && r.trigger && !/\s/u.test(a) && (l === 0 || /\s/u.test(s[l - 1] ?? "")))
+        return { kind: "entity", provider: r, start: l, end: e, query: a };
+    }
+  }
+  async #s(t, e, i, s) {
+    const n = /^\/([^\s]+)/u.exec(t);
+    if (!n || !e)
+      return [];
+    const [o, r] = n;
+    if (i.some((c) => c.start === 0 && c.end === o.length))
+      return [];
+    const l = await e.getSuggestions(r, s);
+    if (s.aborted)
+      return [];
+    const a = l.find((c) => c.id === r);
+    return a ? [
+      {
+        start: 0,
+        end: o.length,
+        part: {
+          kind: "command",
+          id: a.id,
+          label: a.label,
+          agentId: a.agentId,
+          requiresText: a.requiresText || void 0,
+          data: a.data
+        }
+      }
+    ] : [];
+  }
+  async #a(t, e, i, s) {
+    const n = y(e), o = [];
+    for (const r of t.matchAll(/(?:^|\s)(\S+)/gu)) {
+      const l = r[1], a = n.find((u) => l.startsWith(u.trigger));
+      if (!a)
+        continue;
+      const c = r.index + r[0].length - l.length;
+      if (i.some((u) => u.start === c && u.end === c + l.length))
+        continue;
+      const h = l.slice(a.trigger.length);
+      if (!h)
+        continue;
+      const x = await a.getSuggestions(h, s);
+      if (s.aborted)
+        return [];
+      const p = x.find((u) => u.id === h);
+      p && o.push({
+        start: c,
+        end: c + l.length,
+        part: {
+          kind: "entity",
+          providerId: a.id,
+          trigger: a.trigger,
+          id: p.id,
+          label: p.label,
+          data: p.data
+        }
+      });
+    }
+    return o;
+  }
+  #r(t) {
+    this.#e = { ...this.#e, ...t }, this._onStateChange(this.#e);
+  }
+}
+function C(d, t, e, i) {
+  if (d === t && !i)
+    return [...e];
+  let s = 0;
+  const n = Math.min(d.length, t.length, i?.start ?? d.length);
+  for (; s < n && d[s] === t[s]; )
+    s += 1;
+  let o = d.length, r = t.length;
+  const l = Math.max(s, i?.end ?? s);
+  for (; o > l && r > s && d[o - 1] === t[r - 1]; )
+    o -= 1, r -= 1;
+  const a = r - o;
+  return e.flatMap((c) => {
+    const h = c.end <= s ? c : c.start >= o ? { ...c, start: c.start + a, end: c.end + a } : void 0;
+    return h && (h.part.kind !== "command" || h.start === 0) && (h.start === 0 || /\s/u.test(t[h.start - 1])) && (h.end === t.length || /\s/u.test(t[h.end])) ? [h] : [];
+  });
+}
+function R(d, t) {
+  for (const e of [...t].reverse())
+    e.part.kind === "command" && (d = d.slice(0, e.start) + d.slice(e.end).replace(/^[\t ]+/u, ""));
+  return d.trim();
+}
+function D(d, t) {
+  let e = 0;
+  return t.flatMap((i) => {
+    const s = i.kind === "command" ? `/${i.id}` : `${i.trigger}${i.id}`, n = d.indexOf(s, e);
+    return n === -1 ? [] : (e = n + s.length, [{ start: n, end: e, part: i }]);
+  });
+}
+class E extends w {
   constructor() {
-    super(...arguments), this.#s = u(), this.#i = u(), this.#t = -1, this.#e = "", this.#a = (t) => {
+    super(...arguments), this.#t = m(), this.#o = m(), this.#i = new P((t) => this._suggestionState = t), this.#s = [], this.#a = "", this.#r = "", this.#h = () => {
+      const t = this.#t.value?.shadowRoot?.querySelector("textarea");
+      this.#l = t ? { start: t.selectionStart, end: t.selectionEnd } : void 0;
+    }, this.#d = (t) => {
       t.stopPropagation();
-      const s = t.detail;
-      this._setDraftValue(s.value), s.focusInput && this.#s.value && this.#s.value.setFocus();
-    }, this.#r = (t) => {
-      const s = t.target.value ?? "";
-      this.inputValue = s, this.#e = s;
-    }, this._messages = m({ blocking: !0 }), this._inFocus = !1, this.keyboardShortcutsDisabled = !1, this.awaitingResponse = !1, this.inputValue = "", this.voiceInputEnabled = !1, this.messages = new y([]), this.disabled = !1, this.arcgisCancel = l(), this.arcgisSubmit = l();
+      const e = t.detail;
+      this._setDraftValue(e.value), e.focusInput && this.#t.value && this.#t.value.setFocus();
+    }, this.#u = (t) => {
+      const e = t.target.value ?? "", i = this.#l;
+      this.#l = void 0, this.#c(e, i), this.inputValue = e;
+      const s = this.#t.value?.shadowRoot?.querySelector("textarea")?.selectionStart;
+      this.#i.update(e, s, {
+        commandProvider: this.commandProvider,
+        entityProviders: this.entityProviders ?? []
+      });
+    }, this.#g = async (t) => {
+      if (!(t.altKey || t.ctrlKey || t.metaKey || t.shiftKey || this.keyboardShortcutsDisabled)) {
+        if (this._suggestionState.suggestions.length > 0) {
+          if (t.key === "ArrowDown") {
+            t.preventDefault(), this.#i.moveSelection(1);
+            return;
+          }
+          if (t.key === "ArrowUp") {
+            t.preventDefault(), this.#i.moveSelection(-1);
+            return;
+          }
+          if (t.key === "Enter") {
+            t.preventDefault(), await this.#v(this.#i.selectedSuggestion);
+            return;
+          }
+          if (t.key === "Escape") {
+            t.preventDefault(), this.#i.close();
+            return;
+          }
+        }
+        switch (t.key) {
+          case "Enter":
+            t.preventDefault(), await this.submitMessage();
+            break;
+          case "ArrowUp":
+            await this._navigateHistory("up", t);
+            break;
+          case "ArrowDown":
+            await this._navigateHistory("down", t);
+            break;
+        }
+      }
+    }, this._messages = $({ blocking: !0 }), this._inFocus = !1, this._suggestionState = this.#i.state, this._textRequired = !1, this.keyboardShortcutsDisabled = !1, this.awaitingResponse = !1, this.voiceInputEnabled = !1, this.messages = new I([]), this.disabled = !1, this.entityProviders = [], this.arcgisCancel = f(), this.arcgisSubmit = f({ cancelable: !0 });
   }
   static {
-    this.properties = { _inFocus: 16, _userMessages: 16, keyboardShortcutsDisabled: 5, entryPlaceholder: 1, awaitingResponse: 5, inputValue: 1, status: 1, voiceInputEnabled: 5, messages: 0, disabled: 5 };
+    this.properties = { _inFocus: 16, _suggestionState: 16, _textRequired: 16, keyboardShortcutsDisabled: 5, entryPlaceholder: 1, awaitingResponse: 5, inputValue: 1, status: 1, voiceInputEnabled: 5, messages: 0, disabled: 5, commandProvider: 0, entityProviders: 0 };
   }
   static {
-    this.styles = b;
+    this.styles = k;
   }
-  #s;
-  #i;
   #t;
+  #o;
   #e;
+  #i;
+  #s;
   #a;
   #r;
-  get _userMessages() {
-    return this.messages.toArray().filter((t) => t.role === "user").map(({ content: t }) => t);
+  #n;
+  #l;
+  #h;
+  #d;
+  #u;
+  #g;
+  get inputValue() {
+    return this.#r;
+  }
+  set inputValue(t) {
+    t !== this.#r && (this.#r = t, this.#n?.abort(), this.#n = void 0);
   }
   async submitMessage() {
     if (this.awaitingResponse) {
-      this.arcgisCancel.emit();
+      this.#n?.abort(), this.#n = void 0, this.arcgisCancel.emit();
       return;
     }
-    const t = this.inputValue.trim();
-    t && (this.arcgisSubmit.emit(t), this.inputValue = "", this.#t = -1, this.#e = "", this.#i.value?.clearDraftSession(), this.#s.value && await this.#s.value.setFocus());
+    const t = this.inputValue;
+    this.#c(t), this.#n?.abort();
+    const e = new AbortController();
+    this.#n = e;
+    let i;
+    try {
+      if (i = await this.#i.resolveTypedInputs(t, {
+        commandProvider: this.commandProvider,
+        entityProviders: this.entityProviders ?? []
+      }, this.#s, e.signal), e.signal.aborted || this.#n !== e)
+        return;
+    } catch (r) {
+      if (e.signal.aborted)
+        return;
+      throw r;
+    } finally {
+      this.#n === e && (this.#n = void 0);
+    }
+    this.#s.push(...i.filter((r) => !this.#s.some((l) => l.start === r.start && l.end === r.end)));
+    const s = R(t, this.#s);
+    if (this._textRequired = !s && this.#s.some((r) => r.part.kind === "command" && (r.part.requiresText ?? !1)), this._textRequired) {
+      await this.#t.value?.setFocus();
+      return;
+    }
+    const n = this.#p();
+    if (!s && n.length === 0)
+      return;
+    const o = {
+      prompt: s,
+      displayText: t.trim(),
+      parts: n
+    };
+    this.arcgisSubmit.emit(o.parts.length ? o : s).defaultPrevented || (this.inputValue = "", this.#s = [], this.#a = "", this.#e = void 0, this.#i.close(), this.#o.value?.clearDraftSession(), this.#t.value && await this.#t.value.setFocus());
   }
   loaded() {
-    this.manager.onLifecycle(() => (this.el.addEventListener("arcgisVoiceInputDraftChange", this.#a), {
+    this.manager.onLifecycle(() => (this.el.addEventListener("arcgisVoiceInputDraftChange", this.#d), {
       remove: () => {
-        this.el.removeEventListener("arcgisVoiceInputDraftChange", this.#a);
+        this.el.removeEventListener("arcgisVoiceInputDraftChange", this.#d);
       }
     }));
   }
-  async _navigateHistory(t, s) {
-    const a = this.#s.value;
-    if (!a)
+  async _navigateHistory(t, e) {
+    const i = this.#t.value;
+    if (!i)
       return;
-    const e = this._userMessages;
-    if (e.length === 0)
+    const s = this.messages.toArray().filter((c) => c.role === "user");
+    if (s.length === 0)
+      return;
+    const n = i.value ?? "", o = i.shadowRoot?.querySelector("textarea"), r = o?.selectionStart, l = o?.selectionEnd;
+    if (r == null || l == null || r !== l || t === "up" && r !== 0 || t === "down" && r !== n.length)
+      return;
+    if (t === "up") {
+      this.#e ? this.#e.index = Math.max(0, this.#e.index - 1) : this.#e = {
+        index: s.length - 1,
+        draft: this.#y()
+      }, this.#f(s[this.#e.index]), e.preventDefault();
       return;
-    const r = a.value ?? "", o = a.shadowRoot?.querySelector("textarea"), i = o?.selectionStart, n = o?.selectionEnd;
-    if (!(i == null || n == null) && !(i !== n || t === "up" && i !== 0 || t === "down" && i !== r.length)) {
-      if (t === "up") {
-        this.#t === -1 ? (this.#e = r, this.#t = e.length - 1) : this.#t = Math.max(0, this.#t - 1), this.inputValue = e[this.#t] ?? "", s.preventDefault();
-        return;
-      }
-      this.#t !== -1 && (this.#t < e.length - 1 ? (this.#t += 1, this.inputValue = e[this.#t] ?? "") : (this.#t = -1, this.inputValue = this.#e), s.preventDefault());
     }
+    const a = this.#e;
+    a && (a.index < s.length - 1 ? (a.index += 1, this.#f(s[a.index])) : (this.#e = void 0, this.#m(a.draft)), e.preventDefault());
+  }
+  #y() {
+    return this.#c(this.inputValue), {
+      value: this.inputValue,
+      parts: this.#p()
+    };
+  }
+  #p() {
+    return this.#s.map((t) => t.part);
+  }
+  #f(t) {
+    const e = t.parts ?? [];
+    this.#m({ value: t.content, parts: e });
+  }
+  #m(t) {
+    this.inputValue = t.value, this.#a = t.value, this.#s = D(t.value, t.parts), this.#l = void 0, this._textRequired = !1, this.#i.close();
   }
   _setDraftValue(t) {
-    this.inputValue = t, this.#t = -1, this.#e = t;
+    this.#i.close(), this.#s = [], this.#a = t, this.#l = void 0, this._textRequired = !1, this.inputValue = t, this.#e = void 0;
+  }
+  #c(t, e) {
+    this._textRequired = !1, this.#s = C(this.#a, t, this.#s, e), this.#a = t;
+  }
+  async #v(t) {
+    const e = this.#i.activeSuggestion;
+    if (!t || !e)
+      return;
+    const s = `${e.kind === "command" ? "/" : e.provider.trigger}${t.id}`, n = `${this.inputValue.slice(0, e.start)}${s} ${this.inputValue.slice(e.end)}`;
+    this.#c(n), this.#s.push({
+      start: e.start,
+      end: e.start + s.length,
+      part: e.kind === "command" ? {
+        kind: "command",
+        id: t.id,
+        label: t.label,
+        agentId: "agentId" in t ? t.agentId : void 0,
+        requiresText: "requiresText" in t && t.requiresText || void 0,
+        data: t.data
+      } : {
+        kind: "entity",
+        providerId: e.provider.id,
+        trigger: e.provider.trigger,
+        id: t.id,
+        label: t.label,
+        data: t.data
+      }
+    }), this.#s.sort((l, a) => l.start - a.start), this.inputValue = n, this.#e = void 0;
+    const o = e.start + s.length + 1;
+    this.#i.close(), await this.updateComplete, await this.#t.value?.setFocus();
+    const r = this.#t.value?.shadowRoot?.querySelector("textarea");
+    r && (r.selectionStart = o, r.selectionEnd = o);
   }
   _onFocusIn() {
     this._inFocus = !0;
@@ -73,13 +368,17 @@ class w extends f {
   _onFocusOut() {
     this._inFocus = !1;
   }
+  #x(t) {
+    return t ? g`<calcite-popover .open=${this._suggestionState.suggestions.length > 0 || this._suggestionState.loading} placement=top-start .label=${this._messages.suggestions} .referenceElement=${t} trigger-disabled pointer-disabled focus-trap-disabled><calcite-list .label=${this._messages.suggestions} selection-appearance=highlight selection-mode=single-persist .loading=${this._suggestionState.loading}>${this._suggestionState.loading ? null : this._suggestionState.suggestions.map((e, i) => g`<calcite-list-item .label=${e.label} .description=${e.description} .selected=${i === this._suggestionState.selectedIndex} @click=${() => {
+      this.#v(e);
+    }}></calcite-list-item>`)}</calcite-list>${this._suggestionState.loading ? g`<div class="suggestions-loading" role=status>${this._messages.loadingSuggestions}</div>` : null}</calcite-popover>` : null;
+  }
   render() {
-    return c`<div class="input-container"><calcite-text-area class=${g(v({ focused: this._inFocus }))} .value=${this.inputValue} .placeholder=${this.entryPlaceholder ?? this._messages.entryPlaceholder} resize=vertical @calciteTextAreaInput=${this.#r} .disabled=${this.disabled} @keydown=${async (t) => {
-      t.altKey || t.ctrlKey || t.metaKey || t.shiftKey || this.keyboardShortcutsDisabled || (t.key === "Enter" ? (t.preventDefault(), await this.submitMessage()) : t.key === "ArrowUp" ? await this._navigateHistory("up", t) : t.key === "ArrowDown" && await this._navigateHistory("down", t));
-    }} @focusin=${this._onFocusIn} @focusout=${this._onFocusOut} ${h(this.#s)}><div slot=footer-start class="footer-start"><slot name=entry-actions-start></slot></div><div slot=footer-end class="footer-end">${this.voiceInputEnabled ? c`<arcgis-assistant-speech-input .awaitingResponse=${this.awaitingResponse} .inputValue=${this.inputValue} ${h(this.#i)}></arcgis-assistant-speech-input>` : null}<slot name=entry-actions-end></slot></div></calcite-text-area></div>`;
+    const t = this.#t.value;
+    return g`<div class="input-container">${this._textRequired ? g`<div role=alert>${this._messages.textRequired}</div>` : null}<calcite-text-area class=${_({ focused: this._inFocus })} .value=${this.inputValue} .placeholder=${this.entryPlaceholder ?? this._messages.entryPlaceholder} resize=vertical @calciteTextAreaInput=${this.#u} @beforeinput=${this.#h} .status=${this._textRequired ? "invalid" : "idle"} .disabled=${this.disabled} @keydown=${this.#g} @focusin=${this._onFocusIn} @focusout=${this._onFocusOut} ${v(this.#t)}><div slot=footer-start class="footer-start"><slot name=entry-actions-start></slot></div><div slot=footer-end class="footer-end">${this.voiceInputEnabled ? g`<arcgis-assistant-speech-input .awaitingResponse=${this.awaitingResponse} .inputValue=${this.inputValue} ${v(this.#o)}></arcgis-assistant-speech-input>` : null}<slot name=entry-actions-end></slot></div></calcite-text-area>${this.#x(t)}</div>`;
   }
 }
-d("arcgis-assistant-chat-entry", w);
+b("arcgis-assistant-chat-entry", E);
 export {
-  w as ArcgisAssistantChatEntry
+  E as ArcgisAssistantChatEntry
 };

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

@@ -1,3 +1,6 @@
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-text-area";
 import "../arcgis-assistant-speech-input/index.js";
 export * from "./customElement.js";