@noodleseed/assistant 1.21.0 → 1.23.0

package/dist/index.cjs

@@ -22112,11 +22112,11 @@ function isAllowedAppLink(value, allowedDomains, baseUrl) {
     return void 0;
   }
 }
-function createAssistantAppHostContext(theme) {
+function createAssistantAppHostContext(theme, allowFullscreen = false, displayMode = "inline") {
   return {
     theme,
-    displayMode: "inline",
-    availableDisplayModes: ["inline", "fullscreen"],
+    displayMode: allowFullscreen && displayMode === "fullscreen" ? "fullscreen" : "inline",
+    availableDisplayModes: allowFullscreen ? ["inline", "fullscreen"] : ["inline"],
     platform: "web"
   };
 }
@@ -22142,6 +22142,13 @@ function mountAssistantApp(detail, actions, options = {}) {
     title.textContent = detail.title;
     card.append(title);
   }
+  const exitFullscreen = document.createElement("button");
+  exitFullscreen.className = "noodle-app-fullscreen-exit";
+  exitFullscreen.type = "button";
+  exitFullscreen.setAttribute("aria-label", "Exit fullscreen");
+  exitFullscreen.title = "Exit fullscreen";
+  exitFullscreen.hidden = true;
+  card.append(exitFullscreen);
   const frame = document.createElement("iframe");
   frame.className = "noodle-app-frame";
   frame.title = detail.title ?? detail.tool;
@@ -22155,8 +22162,31 @@ function mountAssistantApp(detail, actions, options = {}) {
   let mountedTransport;
   let destroyed = false;
   let initialized = false;
-  let hostContext = createAssistantAppHostContext(actions.theme);
+  let currentTheme = actions.theme;
+  let displayMode = "inline";
+  let hostContext = createAssistantAppHostContext(
+    currentTheme,
+    options.allowFullscreen === true,
+    displayMode
+  );
   let destroyPromise;
+  const applyDisplayMode = (requestedMode) => {
+    displayMode = requestedMode === "fullscreen" && options.allowFullscreen === true ? "fullscreen" : "inline";
+    card.toggleAttribute("data-fullscreen", displayMode === "fullscreen");
+    exitFullscreen.hidden = displayMode !== "fullscreen";
+    hostContext = createAssistantAppHostContext(
+      currentTheme,
+      options.allowFullscreen === true,
+      displayMode
+    );
+    if (initialized) mountedBridge?.setHostContext(hostContext);
+    return displayMode;
+  };
+  exitFullscreen.addEventListener("click", () => {
+    if (destroyed) return;
+    applyDisplayMode("inline");
+    frame.focus();
+  });
   const renderTimer = setTimeout(() => {
     if (initialized || !frame.isConnected) return;
     const note = document.createElement("div");
@@ -22214,6 +22244,11 @@ function mountAssistantApp(detail, actions, options = {}) {
         actions.updateModelContext(update);
         return {};
       };
+      bridge.onrequestteardown = () => {
+        if (destroyed) return;
+        options.onTeardownRequest?.();
+        void destroy();
+      };
       bridge.onopenlink = async ({ url: url2 }) => {
         if (destroyed) return { isError: true };
         const current = options.getDetail?.() ?? detail;
@@ -22227,10 +22262,8 @@ function mountAssistantApp(detail, actions, options = {}) {
         return {};
       };
       bridge.onrequestdisplaymode = async ({ mode }) => {
-        const accepted = mode === "fullscreen" ? "fullscreen" : "inline";
-        if (destroyed) return { mode: accepted };
-        card.toggleAttribute("data-fullscreen", accepted === "fullscreen");
-        return { mode: accepted };
+        if (destroyed) return { mode: displayMode };
+        return { mode: applyDisplayMode(mode) };
       };
       bridge.oncalltool = async (params) => {
         if (destroyed) {
@@ -22275,7 +22308,12 @@ function mountAssistantApp(detail, actions, options = {}) {
   );
   const updateTheme = (theme) => {
     if (destroyed) return;
-    hostContext = createAssistantAppHostContext(theme);
+    currentTheme = theme;
+    hostContext = createAssistantAppHostContext(
+      currentTheme,
+      options.allowFullscreen === true,
+      displayMode
+    );
     if (initialized) mountedBridge?.setHostContext(hostContext);
   };
   const destroy = () => {
@@ -31596,6 +31634,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;
@@ -31697,6 +31762,29 @@ var AssistantElementScrollController = class {
   }
 };
 
+// src/app-view-styles.ts
+var ASSISTANT_APP_VIEW_CSS = `
+  .noodle-app-card { position: relative; display: grid; gap: 8px; width: 100%; margin: 4px 0 16px; overflow: hidden; color: var(--ns-assistant-app-text, inherit); border: 1px solid var(--ns-assistant-app-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider, var(--ns-app-view-border, #d1d5db)))); border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius, 12px)); background: var(--ns-assistant-app, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); }
+  .noodle-app-title { padding: 10px 12px 0; font-size: .86em; font-weight: 650; }
+  .noodle-app-fullscreen-exit { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text, var(--ns-app-view-muted, #6b7280))); border: 1px solid var(--ns-assistant-secondary-button-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider, var(--ns-app-view-border, #d1d5db)))); border-radius: 999px; background: var(--ns-assistant-secondary-button, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); box-shadow: 0 6px 20px rgba(0,0,0,.14); cursor: pointer; font: inherit; transition: color .15s ease, background .15s ease, transform .15s ease; }
+  .noodle-app-fullscreen-exit[hidden] { display: none; }
+  .noodle-app-fullscreen-exit::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
+  .noodle-app-fullscreen-exit:hover { color: var(--ns-assistant-text, var(--ns-assistant-default-text, inherit)); background: var(--ns-assistant-hover, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); }
+  .noodle-app-fullscreen-exit:focus-visible { outline: 3px solid var(--ns-assistant-focus, var(--ns-assistant-default-focus, #2563eb)); outline-offset: 2px; }
+  .noodle-app-fullscreen-exit:active { transform: scale(.96); }
+  .noodle-app-frame { display: block; width: 100%; min-height: 120px; border: 0; background: transparent; }
+  .noodle-app-fallback { padding: 14px 16px; font-size: 13px; color: var(--ns-assistant-muted, var(--ns-assistant-default-muted, var(--ns-app-view-muted, #6b7280))); }
+  .noodle-app-card[data-fullscreen] { position: fixed; inset: 0; z-index: 2; margin: 0; border-radius: 0; background: var(--ns-assistant-panel, var(--ns-assistant-default-panel, var(--ns-app-view-surface, #fff))); }
+  .noodle-app-card[data-fullscreen] .noodle-app-frame { height: 100% !important; }
+`;
+var ASSISTANT_APP_VIEW_STYLES = `<style>
+  *, *::before, *::after { box-sizing: border-box; }
+  :host { --ns-app-view-surface: #fff; --ns-app-view-border: #d1d5db; --ns-app-view-muted: #6b7280; display: block; min-width: 0; color: #111827; color-scheme: light; font: inherit; }
+  :host([data-theme="dark"]) { --ns-app-view-surface: #17191f; --ns-app-view-border: #343741; --ns-app-view-muted: #a7adb8; color: #f3f4f6; color-scheme: dark; }
+  :host([hidden]) { display: none; }
+  ${ASSISTANT_APP_VIEW_CSS}
+</style>`;
+
 // src/element-styles.ts
 var ASSISTANT_ELEMENT_STYLES = `<style>
   *, *::before, *::after { box-sizing: border-box; }
@@ -31711,9 +31799,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; }
@@ -31798,12 +31887,7 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .input-request input[type="checkbox"] { width: auto; min-height: auto; justify-self: start; accent-color: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
   .input-request input:focus-visible, .input-request select:focus-visible { border-color: var(--ns-assistant-focus, var(--ns-assistant-default-focus)); box-shadow: 0 0 0 2px var(--ns-assistant-focus, var(--ns-assistant-default-focus)); }
   .input-request .proposal-actions { margin-top: 2px; }
-  .noodle-app-card { position: relative; display: grid; gap: 8px; width: 100%; margin: 4px 0 16px; overflow: hidden; color: var(--ns-assistant-app-text, inherit); border: 1px solid var(--ns-assistant-app-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: var(--ns-assistant-app, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); }
-  .noodle-app-title { padding: 10px 12px 0; font-size: .86em; font-weight: 650; }
-  .noodle-app-frame { display: block; width: 100%; min-height: 120px; border: 0; background: transparent; }
-  .noodle-app-fallback { padding: 14px 16px; font-size: 13px; color: var(--ns-assistant-muted, var(--ns-assistant-default-muted, #6b7280)); }
-  .noodle-app-card[data-fullscreen] { position: fixed; inset: 0; z-index: 2; margin: 0; border-radius: 0; background: var(--ns-assistant-panel, var(--ns-assistant-default-panel)); }
-  .noodle-app-card[data-fullscreen] .noodle-app-frame { height: 100% !important; }
+  ${ASSISTANT_APP_VIEW_CSS}
   form { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; min-height: 56px; margin: 8px 16px 16px; padding: 6px 6px 6px 16px; color: var(--ns-assistant-composer-text, inherit); border: 1px solid var(--ns-assistant-composer-border, color-mix(in srgb, var(--ns-assistant-divider, var(--ns-assistant-default-divider)) 86%, transparent)); border-radius: var(--ns-assistant-input-radius, var(--ns-assistant-default-input-radius)); background: var(--ns-assistant-composer, color-mix(in srgb, var(--ns-assistant-input, var(--ns-assistant-default-input)) 92%, transparent)); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.035); transition: border-color .15s ease, box-shadow .15s ease; }
   form:focus-within { box-shadow: inset 0 0 0 1px var(--ns-assistant-focus, var(--ns-assistant-default-focus)), 0 0 0 2px var(--ns-assistant-focus, var(--ns-assistant-default-focus)); }
   textarea { flex: 1; min-height: 24px; max-height: 120px; resize: none; padding: 0; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; appearance: none; -webkit-appearance: none; font: inherit; font-size: 16px; line-height: 24px; }
@@ -32339,6 +32423,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 +32498,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 +32515,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     } else if (!this.embedId) {
       this.#primeSession();
     }
-    this.#syncOpenState();
+    this.#presentationGate.syncOpenState();
   }
   disconnectedCallback() {
     this.#conversationGeneration += 1;
@@ -32443,7 +32533,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 +32723,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 +32733,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 +32903,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();