@helpai/elements 0.26.0 → 0.28.0

package/schema.mjs

@@ -569,9 +569,11 @@ var modulesSchema = z14.array(moduleSchema).max(4).describe(
 // src/schema/widget/tracking.ts
 import { z as z15 } from "zod";
 var trackingSchema = z15.object({
-  enabled: z15.boolean().optional().describe("Master switch. Default `false` \u2014 no hits are sent until the deployment turns tracking on."),
+  enabled: z15.boolean().optional().describe(
+    "Master switch. Default `true` \u2014 the widget always fires; the data module gates ingestion per deployment server-side. Set `false` to silence the client entirely."
+  ),
   endpoint: z15.url().max(2048).optional().describe(
-    "Pixel collector URL. Default: `${dataBaseUrl}/elements/px.gif` (e.g. `https://help.ai/api/data/elements/px.gif`). Must be a full URL."
+    "Pixel collector URL. Default: `${dataApiBaseUrl}/pai/elements-px.gif` (e.g. `https://help.ai/api/data/pai/elements-px.gif`). Must be a full URL."
   ),
   sampleRate: z15.number().min(0).max(1).optional().describe("Per-visitor sampling 0..1 (decided once per page load, keeping funnels intact). Default `1`."),
   token: z15.string().max(512).optional().describe(
@@ -585,16 +587,16 @@ var trackingSchema = z15.object({
 
 // src/schema/widget.ts
 var endpointsSchema = z16.object({
-  upload: z16.string().min(1).max(2048).default("/ai-agent/upload-file"),
-  transcribe: z16.string().min(1).max(2048).default("/ai-agent/transcribe-audio"),
-  submitForm: z16.string().min(1).max(2048).default("/submit-form").describe(
+  upload: z16.string().min(1).max(2048).default("/pai/upload-file"),
+  transcribe: z16.string().min(1).max(2048).default("/pai/transcribe-audio"),
+  submitForm: z16.string().min(1).max(2048).default("/pai/submit-form").describe(
     "Form submission endpoint. The widget POSTs each completed form's values here (fire-and-forget), keyed by the same visitorId + conversationId as the conversation; the payload carries `formId` + `trigger` so the backend can route. Optional \u2014 a 404 is ignored."
   )
 }).loose().describe(
-  "HTTP endpoint overrides. `upload` / `transcribe` paths are appended to the agent base (`${baseUrl}/api/agent`), `submitForm` to the data base (`dataBaseUrl`); absolute URLs are accepted too."
+  "HTTP endpoint overrides. `upload` / `transcribe` paths are appended to the agent base (`${baseUrl}/api/agent`), `submitForm` to the data base (`dataApiBaseUrl`); absolute URLs are accepted too."
 ).meta({
   examples: [
-    { upload: "/ai-agent/upload-file", transcribe: "/ai-agent/transcribe-audio" },
+    { upload: "/pai/upload-file", transcribe: "/pai/transcribe-audio" },
     { upload: "https://help.ai/uploads/presign" },
     { submitForm: "https://crm.acme.com/leads" }
   ]
@@ -643,11 +645,11 @@ var connectionConfigSchema = z16.object({
   baseUrl: z16.string().min(1).max(2048).optional().describe(
     "MAIN site origin (e.g. `https://help.ai`) \u2014 the API modules derive from it: agent API at `${baseUrl}/api/agent`, data API at `${baseUrl}/api/data`. Set this to point at your staging / self-hosted / custom backend. Default: the brand's `defaultBaseUrl` baked at build time."
   ),
-  agentBaseUrl: z16.string().min(1).max(2048).optional().describe(
-    "Full agent-API base \u2014 set it to reach a STANDALONE `module-help-ai-agent-api` directly (local module on its own port, e.g. `http://localhost:3087`; routes attach as-is: `/ai-agent/handshake`). Precedence: this option > derived from the main origin (`${baseUrl}/api/agent`). Not server-pushable."
+  agentApiBaseUrl: z16.string().min(1).max(2048).optional().describe(
+    "Full agent-API base \u2014 set it to reach a STANDALONE `module-help-ai-agent-api` directly (local module on its own port, e.g. `http://localhost:3087`; routes attach as-is: `/pai/handshake`). Precedence: this option > derived from the main origin (`${baseUrl}/api/agent`). Not server-pushable."
   ),
-  dataBaseUrl: z16.string().min(1).max(2048).optional().describe(
-    "Full data-API base (e.g. `https://help.ai/api/data`, or a standalone local module like `http://localhost:3106`) \u2014 the service serving content, form definitions (`GET /forms`), and form submissions at root-level paths. Precedence: this option > server-pushed `config.dataBaseUrl` > derived from the main origin (`${baseUrl}/api/data`)."
+  dataApiBaseUrl: z16.string().min(1).max(2048).optional().describe(
+    "Full data-API base (e.g. `https://help.ai/api/data`, or a standalone local module like `http://localhost:3106`) \u2014 the service serving content, form definitions (`GET /forms`), and form submissions at root-level paths. Precedence: this option > server-pushed `config.dataApiBaseUrl` > derived from the main origin (`${baseUrl}/api/data`)."
   ),
   userContext: userContextSchema.optional(),
   pageContext: pageContextSchema.optional(),
@@ -687,7 +689,7 @@ var widgetSettingsSchema = z16.object({
   modules: modulesSchema.optional(),
   tracking: trackingSchema.optional()
 }).loose().describe(
-  "Portal-configurable widget settings \u2014 fourteen sections, one per dashboard tab. The backend pushes this same shape on `/ai-agent/handshake` under `config`."
+  "Portal-configurable widget settings \u2014 fourteen sections, one per dashboard tab. The backend pushes this same shape on `/pai/handshake` under `config`."
 ).meta({
   examples: [
     { presentation: { mode: "floating", position: "bottom-right" }, theme: "auto" },
@@ -731,7 +733,7 @@ var connectionConfigPartialSchema = connectionConfigSchema.partial();
 // src/schema/deployment.ts
 import { z as z17 } from "zod";
 var serverConfigSchema = widgetSettingsSchema.partial().omit({ forms: true }).extend({
-  dataBaseUrl: z17.string().min(1).max(2048).optional()
+  dataApiBaseUrl: z17.string().min(1).max(2048).optional()
 });
 var siteConfigSchema = z17.object({
   title: z17.string().min(1).max(120).optional().describe("Brand / site name. Used as the logo's alt-text fallback."),

package/web-component.mjs

@@ -461,13 +461,13 @@ var DEFAULT_FEATURES = {
 };
 var DEFAULT_FORMS = { list: [], byTrigger: {} };
 var DEFAULT_TRACKING = {
-  enabled: false,
+  enabled: true,
   sampleRate: 1
 };
 var DEFAULT_ENDPOINTS = {
-  upload: "/ai-agent/upload-file",
-  transcribe: "/ai-agent/transcribe-audio",
-  submitForm: "/submit-form"
+  upload: "/pai/upload-file",
+  transcribe: "/pai/transcribe-audio",
+  submitForm: "/pai/submit-form"
 };
 var DEFAULT_LAUNCHER = {
   variant: "circle",
@@ -510,15 +510,15 @@ function resolveOptions(rawOpts) {
   const locale = i18n.locale ?? resolveDefaultLocale(i18n.defaultLocale);
   const availableLocales = i18n.availableLocales ?? [locale];
   const baseUrl = (opts.baseUrl ?? BRAND.defaultBaseUrl).replace(/\/$/, "");
-  const agentBaseUrl = (opts.agentBaseUrl ?? `${baseUrl}/api/agent`).replace(/\/$/, "");
-  const dataBaseUrl = (opts.dataBaseUrl ?? `${baseUrl}/api/data`).replace(/\/$/, "");
+  const agentApiBaseUrl = (opts.agentApiBaseUrl ?? `${baseUrl}/api/agent`).replace(/\/$/, "");
+  const dataApiBaseUrl = (opts.dataApiBaseUrl ?? `${baseUrl}/api/data`).replace(/\/$/, "");
   return {
     widgetId: opts.widgetId ?? "default",
     publicKey: opts.publicKey,
     aiAgentDeploymentId: opts.aiAgentDeploymentId,
     baseUrl,
-    agentBaseUrl,
-    dataBaseUrl,
+    agentApiBaseUrl,
+    dataApiBaseUrl,
     userContext: sanitizeUserContext(opts.userContext),
     pageContext: sanitizePageContext(opts.pageContext),
     position: presentation.position ?? "bottom-right",
@@ -563,7 +563,7 @@ function resolveOptions(rawOpts) {
     poweredBy: resolvePoweredBy(footer.poweredBy),
     composer: resolveComposer(opts.composer),
     modules: resolveModules(opts.modules),
-    tracking: resolveTracking(opts.tracking, dataBaseUrl),
+    tracking: resolveTracking(opts.tracking, dataApiBaseUrl),
     storage: opts.storage ?? defaultStorage,
     onMessage: opts.onMessage,
     onOpen: opts.onOpen,
@@ -596,13 +596,13 @@ function resolveHaptics(overrides) {
     events: overrides?.events
   };
 }
-function resolveTracking(overrides, dataBaseUrl) {
+function resolveTracking(overrides, dataApiBaseUrl) {
   const sampleRate = overrides?.sampleRate ?? DEFAULT_TRACKING.sampleRate;
   return {
     enabled: overrides?.enabled ?? DEFAULT_TRACKING.enabled,
-    // The collector rides the data module — `${dataBaseUrl}/elements/px.gif`
-    // (e.g. `https://help.ai/api/data/elements/px.gif`).
-    endpoint: overrides?.endpoint ?? `${dataBaseUrl}/elements/px.gif`,
+    // The collector rides the data module — `${dataApiBaseUrl}/pai/elements-px.gif`
+    // (e.g. `https://help.ai/api/data/pai/elements-px.gif`).
+    endpoint: overrides?.endpoint ?? `${dataApiBaseUrl}/pai/elements-px.gif`,
     // Clamp instead of reject — a malformed rate must never turn a
     // disabled tracker on or crash resolve (no Zod on the IIFE path).
     sampleRate: Math.min(1, Math.max(0, Number.isFinite(sampleRate) ? sampleRate : 1)),
@@ -771,7 +771,8 @@ function mergeServerConfig(user, server) {
     out[key] = mergeLeaves(sv, uv);
   }
   if (server.modules !== void 0 && user.modules === void 0) out.modules = server.modules;
-  if (server.dataBaseUrl !== void 0 && user.dataBaseUrl === void 0) out.dataBaseUrl = server.dataBaseUrl;
+  if (server.dataApiBaseUrl !== void 0 && user.dataApiBaseUrl === void 0)
+    out.dataApiBaseUrl = server.dataApiBaseUrl;
   const userI18n = user.i18n;
   const serverI18n = server.i18n;
   if (userI18n || serverI18n) {
@@ -831,8 +832,8 @@ var EMBED_SCALAR_ATTRS = [
   ["public-key", "publicKey"],
   ["ai-agent-deployment-id", "aiAgentDeploymentId"],
   ["base-url", "baseUrl"],
-  ["agent-base-url", "agentBaseUrl"],
-  ["data-base-url", "dataBaseUrl"],
+  ["agent-api-base-url", "agentApiBaseUrl"],
+  ["data-api-base-url", "dataApiBaseUrl"],
   ["theme", "theme", (v) => v]
 ];
 var PRESENTATION_ATTRS = [
@@ -1308,63 +1309,61 @@ function parseWireDate(value) {
 }
 var DEFAULT_PATHS = {
   /** Conversation bootstrap. `POST` → deployment config + per-visitor state. */
-  handshake: "/ai-agent/handshake",
+  handshake: "/pai/handshake",
   /** Send a message + stream the reply (SSE). `POST`. */
-  streamMessage: "/ai-agent/stream-message",
+  streamMessage: "/pai/stream-message",
   /**
    * Resume an interrupted reply. `GET` (envelope rides as query params).
    * Stateless: the server re-streams the whole reply SSE again from the start —
    * there is NO `Last-Event-ID`. The client reconciles by id (`seenIds`), so
    * replayed events are skipped and only the continuation surfaces.
    */
-  streamResume: "/ai-agent/stream-resume",
+  streamResume: "/pai/stream-resume",
   /** Abort the in-flight reply stream. `POST`. */
-  cancelStream: "/ai-agent/cancel-stream",
+  cancelStream: "/pai/cancel-stream",
   /** List the visitor's conversations. `GET`. */
-  listConversations: "/ai-agent/list-conversations",
+  listConversations: "/pai/list-conversations",
   /** Load one conversation's thread (messages + canContinue + suggestions). `GET ?conversationId=…`. */
-  listMessages: "/ai-agent/list-messages",
+  listMessages: "/pai/list-messages",
   /**
    * Persist a user-driven settings change. POST `{ visitorId, userPrefs }` →
    * server persists, returns the merged authoritative copy. Fire-and-forget on
    * the client — a failure leaves the local cache valid; the next
    * `handshake()` reconciles.
    */
-  updateSettings: "/ai-agent/update-settings",
+  updateSettings: "/pai/update-settings",
   /**
    * Mark a conversation read. POST `{ visitorId, conversationId }` → the server
    * records `lastReadAt = now` for that (visitor, conversation) and recomputes
    * `unreadCount` (returned on `/list-conversations`) accordingly. Fire-and-forget
    * on the client; a failure just leaves the badge until the next sync.
    */
-  markRead: "/ai-agent/mark-read",
-  // ── Data API (module-help-ai-data-api, via `dataBaseUrl`) ─────────
-  /** All widget content via one filtered endpoint. `GET /content?tags=…`. */
-  content: "/content",
+  markRead: "/pai/mark-read",
+  // ── Data API (module-help-ai-data-api, via `dataApiBaseUrl`) ─────────
+  /**
+   * The data module's one ACTIVATION read. `GET
+   * /pai/bootstrap?visitorId=…&conversationId=…` →
+   * `{ forms, formSubmissions }`: the deployment's resolved form
+   * definitions plus the visitor's recorded submissions for the envelope's
+   * conversation (chronological — they rebuild the timeline markers).
+   * Also re-read with an explicit `conversationId` selector on a
+   * history-pane thread switch. A failure is treated as "no forms, no
+   * records" (non-fatal) — the chat works regardless.
+   */
+  bootstrap: "/pai/bootstrap",
   /**
-   * Resolved form definitions for the deployment. `GET /forms` →
-   * `{ forms: FormDef[] }`. Fetched once at boot (in parallel with
-   * handshake); form gating waits for it. A failure is treated as
-   * "no forms" (non-fatal).
+   * All widget content via one filtered endpoint — content stays OUT of the
+   * bootstrap because its reads are query-driven (`tags` / `categories` /
+   * `ids` / `search` + pagination). `GET /pai/content?tags=…`.
    */
-  forms: "/forms",
+  content: "/pai/content",
   /**
    * Form submission (the event-driven forms engine). POST `{ visitorId,
    * conversationId, formId, trigger, values, skipped? }` → record the form's answers
    * immediately, keyed by the same `visitorId` + `conversationId` the chat uses.
    * Overridable via `endpoints.submitForm`. Fire-and-forget; 404 is ignored.
    */
-  submitForm: "/submit-form",
-  /**
-   * Visitor interaction records for a conversation. `GET
-   * /activity?visitorId=…&conversationId=…` →
-   * `{ formSubmissions: FormSubmissionRecord[] }` (chronological). Replaces
-   * the former `formSubmissions` echo on the handshake / list-messages;
-   * deliberately generic — future visitor interaction records ride the same
-   * endpoint. A failure (e.g. 404 `AI_AGENT_PUBLIC_ACCESS_NOT_FOUND` when the
-   * deployment doesn't resolve) is treated as "no records" (non-fatal).
-   */
-  activity: "/activity"
+  submitForm: "/pai/submit-form"
 };
 var CONTEXT_PARAM = "context";
 function buildSendMessageRequest(params) {
@@ -1633,7 +1632,7 @@ var AgentTransport = class {
   }
   // ---- Data API (content / forms — module-help-ai-data-api) --------------
   //
-  // The DATA surfaces live on `dataBaseUrl` (default `${baseUrl}/api/data`)
+  // The DATA surfaces live on `dataApiBaseUrl` (default `${baseUrl}/api/data`)
   // with ROOT-level paths — same auth headers + envelope, same retry
   // behavior. One endpoint for every content surface (Home / Help / News /
   // docs); callers pass filters; a thrown StreamError (e.g. 404 on an older
@@ -1653,38 +1652,26 @@ var AgentTransport = class {
     return { ...res, items };
   }
   /**
-   * Fetch the deployment's resolved form definitions. `GET /forms`
-   * (data-API). Replaces the former `config.forms` push on the handshake —
-   * called once at boot, in parallel with `handshake`; form gating
-   * (pre-chat etc.) waits for it. Callers treat a thrown StreamError as
-   * "no forms" (non-fatal).
-   */
-  async listForms() {
-    log4.debug("listForms \u2192");
-    const res = await this.getJson(this.dataUrl(DEFAULT_PATHS.forms), "listForms");
-    const forms = res.forms ?? [];
-    log4.debug("listForms \u2190", { count: forms.length });
-    return { forms };
-  }
-  /**
-   * Fetch the visitor's recorded activity for a conversation — currently the
-   * form submissions that rebuild the collapsed "form submitted / skipped"
-   * timeline markers on resume. `GET /activity` (data-API); the
-   * envelope carries `visitorId` / `conversationId` as query params.
-   * `conversationId` here is an optional resource selector (a thread that may
-   * differ from the active conversation — the history-pane switch); when
-   * omitted, the envelope's active conversation applies. Callers treat a
-   * thrown StreamError (e.g. 404 on a deployment that doesn't resolve) as
-   * "no activity" (non-fatal).
+   * The data module's ONE activation read. `GET /pai/bootstrap` (data-API)
+   * → the deployment's resolved form definitions + the visitor's recorded
+   * form submissions for the envelope's conversation. The handshake
+   * (agent-API) is completely independent of these surfaces.
+   *
+   * `conversationId` is an optional resource selector (a thread that may
+   * differ from the active conversation — the history-pane switch re-reads
+   * that thread's submissions); when omitted, the envelope's active
+   * conversation applies. Callers treat a thrown StreamError (e.g. 404 on a
+   * deployment that doesn't resolve) as "no forms, no records" (non-fatal).
    */
-  async getActivity(conversationId) {
-    const url = new URL(this.dataUrl(DEFAULT_PATHS.activity));
+  async bootstrap(conversationId) {
+    const url = new URL(this.dataUrl(DEFAULT_PATHS.bootstrap));
     if (conversationId) url.searchParams.set("conversationId", conversationId);
-    log4.debug("getActivity \u2192", { conversationId: conversationId ?? this.conversationId });
-    const res = await this.getJson(url.toString(), "getActivity");
+    log4.debug("bootstrap \u2192", { conversationId: conversationId ?? this.conversationId });
+    const res = await this.getJson(url.toString(), "bootstrap");
+    const forms = res.forms ?? [];
     const formSubmissions = res.formSubmissions ?? [];
-    log4.debug("getActivity \u2190", { count: formSubmissions.length });
-    return { formSubmissions };
+    log4.debug("bootstrap \u2190", { forms: forms.length, formSubmissions: formSubmissions.length });
+    return { forms, formSubmissions };
   }
   async saveUserPrefs(userPrefs) {
     log4.debug("saveUserPrefs \u2192", {
@@ -1697,10 +1684,10 @@ var AgentTransport = class {
     return res;
   }
   get uploadPath() {
-    return this.opts.endpoints?.upload ?? "/ai-agent/upload-file";
+    return this.opts.endpoints?.upload ?? "/pai/upload-file";
   }
   get transcribePath() {
-    return this.opts.endpoints?.transcribe ?? "/ai-agent/transcribe-audio";
+    return this.opts.endpoints?.transcribe ?? "/pai/transcribe-audio";
   }
   get submitFormPath() {
     return this.opts.endpoints?.submitForm ?? DEFAULT_PATHS.submitForm;
@@ -1843,7 +1830,7 @@ var AgentTransport = class {
     }
     return false;
   }
-  /** Abort + fire-and-forget POST to `/ai-agent/cancel-stream`. Idempotent. */
+  /** Abort + fire-and-forget POST to `/pai/cancel-stream`. Idempotent. */
   cancelStream(ctrl, conversationId) {
     if (ctrl.signal.aborted) return;
     log4.debug("cancel stream", { conversationId, visitorId: this.visitorId });
@@ -1953,12 +1940,12 @@ var AgentTransport = class {
     return await res.json();
   }
   /**
-   * Agent-API URL — resolves a `/ai-agent/*` path against the resolved
+   * Agent-API URL — resolves a `/pai/*` path against the resolved
    * agent module base. Absolute URLs pass through unchanged.
    */
   url(pathOrUrl) {
     if (/^https?:\/\//i.test(pathOrUrl)) return pathOrUrl;
-    return `${this.opts.agentBaseUrl}${pathOrUrl}`;
+    return `${this.opts.agentApiBaseUrl}${pathOrUrl}`;
   }
   /**
    * Data-API variant of {@link url} — resolves a root-level path (content /
@@ -1968,7 +1955,7 @@ var AgentTransport = class {
    */
   dataUrl(pathOrUrl) {
     if (/^https?:\/\//i.test(pathOrUrl)) return pathOrUrl;
-    return `${this.opts.dataBaseUrl}${pathOrUrl}`;
+    return `${this.opts.dataApiBaseUrl}${pathOrUrl}`;
   }
   get fetchImpl() {
     return this.opts.fetchImpl ?? globalThis.fetch.bind(globalThis);
@@ -6534,8 +6521,8 @@ function App({ options, hostElement, bus }) {
   const [formContext, setFormContext] = useState13({});
   const [transport] = useState13(
     () => new AgentTransport({
-      agentBaseUrl: options.agentBaseUrl,
-      dataBaseUrl: options.dataBaseUrl,
+      agentApiBaseUrl: options.agentApiBaseUrl,
+      dataApiBaseUrl: options.dataApiBaseUrl,
       auth: createAuth({
         publicKey: options.publicKey,
         aiAgentDeploymentId: options.aiAgentDeploymentId,
@@ -6616,10 +6603,11 @@ function App({ options, hostElement, bus }) {
     },
     [messagesSig]
   );
+  const dataBootRef = useRef9(null);
   const fetchFormMarkers = useCallback6(
     async (conversationId) => {
       try {
-        const { formSubmissions: subs } = await transport.getActivity(conversationId);
+        const { formSubmissions: subs } = await (conversationId ? transport.bootstrap(conversationId) : dataBootRef.current ?? transport.bootstrap());
         const lastIndexByForm = /* @__PURE__ */ new Map();
         subs.forEach((rec, i) => lastIndexByForm.set(rec.formId, i));
         return subs.filter((rec, i) => !rec.skipped || lastIndexByForm.get(rec.formId) === i).map((rec, i) => ({
@@ -6630,7 +6618,7 @@ function App({ options, hostElement, bus }) {
           values: rec.values
         }));
       } catch (err) {
-        log16.debug("getActivity failed \u2014 no form markers (non-fatal)", { err });
+        log16.debug("bootstrap failed \u2014 no form markers (non-fatal)", { err });
         return [];
       }
     },
@@ -6819,12 +6807,13 @@ function App({ options, hostElement, bus }) {
   }, []);
   useEffect17(() => {
     if (!activated) return;
+    dataBootRef.current = transport.bootstrap();
     void (async () => {
       try {
-        const res = await transport.listForms();
-        setRemoteForms(resolveForms(res.forms));
+        const res = await dataBootRef.current;
+        setRemoteForms(resolveForms((res ?? { forms: [] }).forms));
       } catch (err) {
-        log16.debug("listForms failed \u2014 treating as no forms", { err });
+        log16.debug("bootstrap failed \u2014 treating as no forms", { err });
       } finally {
         setFormsReady(true);
       }
@@ -7209,6 +7198,20 @@ function App({ options, hostElement, bus }) {
     },
     [transport, messagesSig, conversationIdSig, bus, options, persistence, refreshUnread, fetchFormMarkers]
   );
+  const pendingOpenFormRef = useRef9(null);
+  const openForm = useCallback6(
+    (id) => {
+      if (typeof id !== "string") return;
+      if (formsReady) forms.fire("manual", id);
+      else pendingOpenFormRef.current = id;
+    },
+    [formsReady, forms]
+  );
+  useEffect17(() => {
+    if (!formsReady || !pendingOpenFormRef.current) return;
+    forms.fire("manual", pendingOpenFormRef.current);
+    pendingOpenFormRef.current = null;
+  }, [formsReady, forms]);
   useEffect17(() => {
     const unsub = bindHostCommands(hostElement, {
       open: handleOpen,
@@ -7216,10 +7219,10 @@ function App({ options, hostElement, bus }) {
       expand: handleExpand,
       fullscreen: handleFullscreen,
       popout: handlePopOut,
-      openForm: (id) => forms.fire("manual", typeof id === "string" ? id : void 0)
+      openForm
     });
     return unsub;
-  }, [hostElement, handleOpen, handleClose, handleExpand, handleFullscreen, handlePopOut, forms]);
+  }, [hostElement, handleOpen, handleClose, handleExpand, handleFullscreen, handlePopOut, openForm]);
   const effectiveOptions = useMemo3(
     () => applyOptionOverrides(options, activeLocale, activeThemeMode, activeTextSize),
     [options, activeLocale, activeThemeMode, activeTextSize]