@noodleseed/assistant 1.21.0 → 1.22.0

package/dist/index.cjs

@@ -31596,6 +31596,33 @@ var AssistantElementPageContextController = class {
   }
 };
 
+// src/element-presentation-gate.ts
+var AssistantElementPresentationGate = class {
+  #host;
+  #primeSession;
+  #focusComposer;
+  constructor(host, primeSession, focusComposer) {
+    this.#host = host;
+    this.#primeSession = primeSession;
+    this.#focusComposer = focusComposer;
+  }
+  syncOpenState() {
+    const open = this.#host.hasAttribute("open");
+    const presentationReady = this.#host.hasAttribute("data-presentation-ready");
+    const launcher = this.#host.shadowRoot?.querySelector(".launcher");
+    launcher?.setAttribute("aria-expanded", String(open && presentationReady));
+    launcher?.setAttribute("aria-busy", String(open && !presentationReady));
+    if (launcher) launcher.disabled = open && !presentationReady;
+    if (open && this.#host.isConnected) this.#primeSession();
+  }
+  reveal() {
+    if (this.#host.hasAttribute("data-presentation-ready")) return;
+    this.#host.setAttribute("data-presentation-ready", "");
+    this.syncOpenState();
+    if (this.#host.hasAttribute("open")) queueMicrotask(this.#focusComposer);
+  }
+};
+
 // src/element-scroll-controller.ts
 var AssistantElementScrollController = class {
   #region;
@@ -31711,9 +31738,10 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .launcher:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 26px rgba(0,0,0,.16); }
   .launcher img { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; }
   .panel { display: none; flex-direction: column; width: min(var(--ns-assistant-panel-width, var(--ns-assistant-default-panel-width)), calc(100vw - 40px)); min-height: var(--ns-assistant-min-height, var(--ns-assistant-default-min-height)); max-height: min(var(--ns-assistant-max-height, var(--ns-assistant-default-max-height)), calc(100vh - 40px)); overflow: hidden; color: var(--ns-assistant-panel-text, var(--ns-assistant-text, var(--ns-assistant-default-text))); background: var(--ns-assistant-panel, var(--ns-assistant-default-panel)); border: 1px solid var(--ns-assistant-panel-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-panel-radius, var(--ns-assistant-default-panel-radius)); box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-default-shadow)); transform-origin: bottom right; isolation: isolate; animation: halo-panel-in .28s cubic-bezier(.23,1,.32,1) both; }
-  :host([open]) .panel { display: flex; }
+  :host([open][data-presentation-ready]) .panel { display: flex; }
   .panel { position: relative; }
-  :host([open]) .launcher { display: none; }
+  :host([open][data-presentation-ready]) .launcher { display: none; }
+  :host([open]:not([data-presentation-ready])) .launcher { cursor: progress; opacity: .72; transform: none; }
   header { display: flex; flex: 0 0 auto; gap: 10px; align-items: center; min-height: 64px; padding: 12px 18px; color: var(--ns-assistant-header-text, inherit); background: var(--ns-assistant-header, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ns-assistant-header-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))) 78%, transparent); }
   header strong { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: 0; }
   .brand-logo { display: block; max-width: 120px; max-height: 28px; object-fit: contain; }
@@ -32339,6 +32367,11 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   #automaticPageContext = new AssistantElementPageContextController(
     () => !this.#pageContext
   );
+  #presentationGate = new AssistantElementPresentationGate(
+    this,
+    () => this.#primeSession(),
+    () => this.focusComposer()
+  );
   #pendingUserEcho;
   #sessionState = "idle";
   #startOpenApplied = false;
@@ -32409,6 +32442,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     if (!this.sessionEndpoint) this.sessionEndpoint = this.getAttribute("session-endpoint") ?? "";
     if (!this.embedId) this.embedId = this.getAttribute("embed-id") ?? "";
     if (!this.serviceUrl) this.serviceUrl = this.getAttribute("service-url") ?? "";
+    if (!this.sessionEndpoint && !this.embedId) this.#presentationGate.reveal();
     this.#media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
     this.#media?.addEventListener("change", this.#handleSystemTheme);
     document.addEventListener("keydown", this.#handleDocumentKeydown);
@@ -32425,7 +32459,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     } else if (!this.embedId) {
       this.#primeSession();
     }
-    this.#syncOpenState();
+    this.#presentationGate.syncOpenState();
   }
   disconnectedCallback() {
     this.#conversationGeneration += 1;
@@ -32443,7 +32477,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   }
   attributeChangedCallback(name21) {
     if (name21 === "theme") this.#applyTheme();
-    if (name21 === "open") this.#syncOpenState();
+    if (name21 === "open") this.#presentationGate.syncOpenState();
   }
   open() {
     this.setAttribute("open", "");
@@ -32633,6 +32667,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     const bootstrap = client.connect().catch((error51) => {
       if (generation !== this.#conversationGeneration || this.#client !== client) return;
       this.#dispatchClientError(error51, "session_failed");
+      this.#presentationGate.reveal();
     }).finally(() => {
       if (this.#sessionBootstrap === bootstrap) this.#sessionBootstrap = void 0;
     });
@@ -32642,6 +32677,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.dispatchEvent(new CustomEvent("assistant-event", { detail: event }));
     this.#events.handle(event);
     if (event.event === "session_started") {
+      this.#presentationGate.reveal();
       this.#setSessionState("ready");
       this.#messages?.querySelector(".conversation-error")?.remove();
     }
@@ -32811,11 +32847,6 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.#sessionState = state;
     syncAssistantSessionVisualState(this, this.shadowRoot, state, this.#appearance);
   }
-  #syncOpenState() {
-    const open = this.hasAttribute("open");
-    this.shadowRoot?.querySelector(".launcher")?.setAttribute("aria-expanded", String(open));
-    if (open && this.isConnected) this.#primeSession();
-  }
   #closeAndRestoreFocus() {
     this.close();
     this.shadowRoot?.querySelector(".launcher")?.focus();