@modelnex/sdk 0.5.26 → 0.5.28

package/dist/index.js

@@ -1827,8 +1827,153 @@ async function captureScreenshot(selector) {
   return canvas.toDataURL("image/png");
 }
 
+// src/utils/experience-tool-bridge.ts
+var activeBridge = null;
+function registerExperienceToolBridge(bridge) {
+  activeBridge = bridge;
+  return () => {
+    if (activeBridge === bridge) {
+      activeBridge = null;
+    }
+  };
+}
+function getExperienceToolBridge() {
+  return activeBridge;
+}
+
+// src/utils/tourDiscovery.ts
+async function fetchTours(serverUrl, toursApiBase, websiteId, userType, userId, experienceType = "tour") {
+  try {
+    const params = new URLSearchParams({
+      websiteId,
+      userType
+    });
+    if (userId) params.set("userId", userId);
+    if (experienceType !== "tour") params.set("type", experienceType);
+    const res = await fetch(getTourApiUrl(serverUrl, toursApiBase, `/tours?${params.toString()}`));
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.tours ?? [];
+  } catch {
+    return [];
+  }
+}
+async function fetchTourById(serverUrl, toursApiBase, tourId, experienceType = "tour", websiteId) {
+  try {
+    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}`), websiteId));
+    if (experienceType !== "tour") {
+      url.searchParams.set("type", experienceType);
+    }
+    const res = await fetch(url.toString());
+    if (!res.ok) {
+      return null;
+    }
+    const data = await res.json();
+    return data.tour ?? null;
+  } catch {
+    return null;
+  }
+}
+async function markTourComplete(serverUrl, toursApiBase, tourId, userId, experienceType = "tour", websiteId) {
+  try {
+    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/complete`), websiteId));
+    if (experienceType !== "tour") {
+      url.searchParams.set("type", experienceType);
+    }
+    await fetch(url.toString(), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ userId })
+    });
+  } catch {
+  }
+}
+async function markTourDismissed(serverUrl, toursApiBase, tourId, userId, experienceType = "tour", websiteId) {
+  try {
+    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/dismiss`), websiteId));
+    if (experienceType !== "tour") {
+      url.searchParams.set("type", experienceType);
+    }
+    await fetch(url.toString(), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ userId })
+    });
+  } catch {
+  }
+}
+async function recordTourEvent(serverUrl, toursApiBase, tourId, userId, eventType, websiteId) {
+  try {
+    const url = withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/events`), websiteId);
+    await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ userId, eventType })
+    });
+  } catch {
+  }
+}
+function getToursBaseUrl(serverUrl, toursApiBase) {
+  if (toursApiBase?.startsWith("/")) {
+    return `${typeof window !== "undefined" ? window.location.origin : ""}${toursApiBase.replace(/\/$/, "")}`;
+  }
+  return serverUrl.replace(/\/$/, "");
+}
+function getTourApiUrl(serverUrl, toursApiBase, path) {
+  const base = getToursBaseUrl(serverUrl, toursApiBase);
+  return toursApiBase ? `${base}${path}` : `${base}/api${path}`;
+}
+function withWebsiteId(url, websiteId) {
+  if (!websiteId) {
+    return url;
+  }
+  const baseOrigin = typeof window !== "undefined" ? window.location.origin : "http://localhost";
+  const resolved = new URL(url, baseOrigin);
+  resolved.searchParams.set("websiteId", websiteId);
+  return resolved.toString();
+}
+function normalizeTrigger(trigger) {
+  if (trigger === "feature_launch" || trigger === "feature_unlocked" || trigger === "feature_unlock" || trigger === "new_feature") {
+    return "feature_launch";
+  }
+  if (trigger === "return_visit") {
+    return "return_visit";
+  }
+  return trigger ?? "first_visit";
+}
+function getStartPolicy(tour) {
+  return tour.startPolicy ?? (normalizeTrigger(tour.trigger) === "manual" ? "immediate_start" : "prompt_only");
+}
+function getNotificationType(tour) {
+  return tour.notificationType ?? "bubble_card";
+}
+function getUserProfileFeatures(userProfile) {
+  const directFeatures = Array.isArray(userProfile.features) ? userProfile.features : [];
+  const nestedFeatures = Array.isArray(userProfile.tourFacts?.features) ? userProfile.tourFacts.features : [];
+  return [...new Set([...directFeatures, ...nestedFeatures].filter((value) => Boolean(value)))];
+}
+function isTourEligible(tour, userProfile) {
+  switch (normalizeTrigger(tour.trigger)) {
+    case "first_visit":
+      return !!userProfile.isNewUser;
+    case "return_visit":
+      return userProfile.isNewUser === false;
+    case "feature_launch": {
+      const featureKey = tour.featureKey?.trim();
+      if (!featureKey) return false;
+      return getUserProfileFeatures(userProfile).includes(featureKey);
+    }
+    case "manual":
+      return false;
+    default:
+      return false;
+  }
+}
+
 // src/hooks/useBuiltinActions.ts
 var resolutionCache = /* @__PURE__ */ new Map();
+var DEFAULT_WORKFLOW_SEARCH_LIMIT = 5;
+var WORKFLOW_TYPES = ["onboarding", "tour"];
 function safeQueryAll2(selector) {
   try {
     return Array.from(document.querySelectorAll(selector)).filter(
@@ -2003,6 +2148,137 @@ function lastResortScan(fingerprint, options, elements) {
 function cacheResolution(originalFp, selector, resolvedFp) {
   resolutionCache.set(originalFp, { selector, resolvedFingerprint: resolvedFp });
 }
+function normalizeWorkflowQuery(value) {
+  return value.trim().toLowerCase();
+}
+function getWorkflowSearchText(tour) {
+  const firstSteps = (tour.steps || []).slice(0, 6).flatMap((step) => [step.goal, step.narration, step.ask]).filter(Boolean).join(" ");
+  return [
+    tour.name,
+    tour.type,
+    tour.trigger,
+    tour.startPolicy,
+    tour.featureKey,
+    tour.goal?.primaryAction,
+    tour.goal?.successMetric,
+    ...tour.targetUserTypes,
+    firstSteps
+  ].filter(Boolean).join(" ").toLowerCase();
+}
+function scoreWorkflowMatch(tour, query) {
+  const normalizedQuery = normalizeWorkflowQuery(query);
+  if (!normalizedQuery) return 1;
+  const name = tour.name.toLowerCase();
+  const featureKey = (tour.featureKey || "").toLowerCase();
+  const haystack = getWorkflowSearchText(tour);
+  if (name === normalizedQuery) return 140;
+  if (featureKey && featureKey === normalizedQuery) return 125;
+  if (name.includes(normalizedQuery)) return 115;
+  if (featureKey && featureKey.includes(normalizedQuery)) return 100;
+  if (haystack.includes(normalizedQuery)) return 85;
+  const words = normalizedQuery.split(/\s+/).filter((word) => word.length > 1);
+  if (words.length === 0) return 0;
+  const matched = words.filter((word) => haystack.includes(word));
+  if (matched.length === 0) return 0;
+  const ratio = matched.length / words.length;
+  return Math.round(ratio * 70);
+}
+function summarizeWorkflowStep(step, index) {
+  const detail = step.goal || step.ask || step.narration || step.rawNarration || "No description";
+  return `${index + 1}. [${step.type}] ${detail}`;
+}
+function formatWorkflowSummary(tour, options) {
+  const stepLimit = options?.stepLimit ?? 4;
+  const parts = [
+    `**${tour.name}**`,
+    `ID: ${tour.id}`,
+    `Type: ${tour.type || "tour"}`,
+    `Trigger: ${tour.trigger}`,
+    `Start policy: ${tour.startPolicy || "prompt_only"}`,
+    tour.featureKey ? `Feature key: ${tour.featureKey}` : null,
+    tour.targetUserTypes?.length ? `Target users: ${tour.targetUserTypes.join(", ")}` : null,
+    `Steps: ${tour.steps?.length ?? 0}`,
+    tour.goal?.primaryAction ? `Primary action: ${tour.goal.primaryAction}` : null
+  ].filter(Boolean);
+  if (options?.includeSteps) {
+    const stepPreview = (tour.steps || []).slice(0, stepLimit).map((step, index) => summarizeWorkflowStep(step, index)).join("\n");
+    if (stepPreview) {
+      parts.push(`Steps preview:
+${stepPreview}`);
+    }
+  }
+  return parts.join("\n");
+}
+function getRequestedWorkflowTypes(experienceType) {
+  if (!experienceType || experienceType === "all") {
+    return WORKFLOW_TYPES;
+  }
+  return [experienceType];
+}
+async function fetchAvailableWorkflows(getters, experienceType) {
+  const serverUrl = getters.serverUrl();
+  const websiteId = getters.websiteId();
+  if (!serverUrl) {
+    throw new Error("Server URL is not configured.");
+  }
+  if (!websiteId) {
+    throw new Error("websiteId is required to search workflows.");
+  }
+  const userProfile = getters.userProfile();
+  const userType = userProfile?.type || "";
+  const userId = userProfile?.userId;
+  const toursApiBase = getters.toursApiBase();
+  const requestedTypes = getRequestedWorkflowTypes(experienceType);
+  const lists = await Promise.all(
+    requestedTypes.map(
+      (type) => fetchTours(serverUrl, toursApiBase, websiteId, userType, userId, type)
+    )
+  );
+  return lists.flatMap(
+    (list, index) => list.map((tour) => ({
+      ...tour,
+      type: tour.type || requestedTypes[index]
+    }))
+  );
+}
+async function resolveWorkflowFromInput(getters, params) {
+  const serverUrl = getters.serverUrl();
+  const websiteId = getters.websiteId();
+  const toursApiBase = getters.toursApiBase();
+  if (!serverUrl) {
+    throw new Error("Server URL is not configured.");
+  }
+  if (params.workflowId) {
+    const requestedTypes = getRequestedWorkflowTypes(params.experienceType);
+    for (const type of requestedTypes) {
+      const workflow = await fetchTourById(serverUrl, toursApiBase, params.workflowId, type, websiteId);
+      if (workflow) {
+        return { workflow: { ...workflow, type: workflow.type || type } };
+      }
+    }
+  }
+  const query = params.name?.trim();
+  if (!query) {
+    return { workflow: null, reason: "Provide either workflowId or name." };
+  }
+  const workflows = await fetchAvailableWorkflows(getters, params.experienceType);
+  const ranked = workflows.map((workflow) => ({ workflow, score: scoreWorkflowMatch(workflow, query) })).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score);
+  if (ranked.length === 0) {
+    return {
+      workflow: null,
+      reason: `No workflow matched "${query}". Try search_workflows first for available options.`
+    };
+  }
+  if (ranked.length > 1 && ranked[0].score === ranked[1].score) {
+    return {
+      workflow: null,
+      reason: `Multiple workflows matched "${query}". Try view_workflow with an exact workflowId.
+
+` + ranked.slice(0, 3).map(({ workflow }) => formatWorkflowSummary(workflow)).join("\n\n---\n\n")
+    };
+  }
+  return { workflow: ranked[0].workflow };
+}
 var screenshotSchema = import_zod2.z.object({
   selector: import_zod2.z.string().optional().describe("Optional CSS selector to capture a specific element. Omit to capture the full viewport.")
 });
@@ -2283,15 +2559,91 @@ function createSearchTaggedElementsAction(getTagStore) {
     }
   };
 }
+var workflowExperienceTypeSchema = import_zod2.z.enum(["onboarding", "tour", "all"]);
+var searchWorkflowsSchema = import_zod2.z.object({
+  query: import_zod2.z.string().optional().describe("Optional workflow name, feature, or task phrase to search for. Omit to list available workflows."),
+  experienceType: workflowExperienceTypeSchema.optional().describe("Which workflow type to search: onboarding, tour, or all. Default: onboarding."),
+  limit: import_zod2.z.number().optional().describe(`Maximum number of workflows to return (default: ${DEFAULT_WORKFLOW_SEARCH_LIMIT}).`)
+});
+function createSearchWorkflowsAction(getters) {
+  return {
+    id: "search_workflows",
+    description: "Search available workflows and tours that can be launched for the current website/user. Use this when the user asks for onboarding, a walkthrough, a tutorial, a guided setup, or a named workflow/tour.",
+    schema: searchWorkflowsSchema,
+    execute: async (params) => {
+      const workflows = await fetchAvailableWorkflows(getters, params.experienceType ?? "onboarding");
+      if (workflows.length === 0) {
+        return "No workflows are currently available for this website/user.";
+      }
+      const query = params.query?.trim();
+      const limit = params.limit ?? DEFAULT_WORKFLOW_SEARCH_LIMIT;
+      const ranked = workflows.map((workflow) => ({
+        workflow,
+        score: query ? scoreWorkflowMatch(workflow, query) : 1
+      })).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score).slice(0, limit);
+      if (ranked.length === 0) {
+        return `No workflows matched "${query}".`;
+      }
+      return ranked.map(({ workflow }) => formatWorkflowSummary(workflow)).join("\n\n---\n\n");
+    }
+  };
+}
+var resolveWorkflowSchema = import_zod2.z.object({
+  workflowId: import_zod2.z.string().optional().describe("Exact workflow id when known."),
+  name: import_zod2.z.string().optional().describe("Workflow name or a close name match when the id is unknown."),
+  experienceType: workflowExperienceTypeSchema.optional().describe("Which workflow type to search: onboarding, tour, or all. Default: onboarding.")
+});
+function createViewWorkflowAction(getters) {
+  return {
+    id: "view_workflow",
+    description: "View a specific workflow or tour in more detail, including its id, trigger, start policy, and the first few steps. Use after search_workflows when you need to inspect a candidate before starting it.",
+    schema: resolveWorkflowSchema,
+    execute: async (params) => {
+      const { workflow, reason } = await resolveWorkflowFromInput(getters, params);
+      if (!workflow) {
+        return reason || "Workflow not found.";
+      }
+      return formatWorkflowSummary(workflow, { includeSteps: true, stepLimit: 5 });
+    }
+  };
+}
+var startWorkflowSchema = resolveWorkflowSchema.extend({
+  reviewMode: import_zod2.z.boolean().optional().describe("Optional. Start in review mode instead of normal playback. Default: false.")
+});
+function createStartWorkflowAction(getters) {
+  return {
+    id: "start_workflow",
+    description: "Start a specific workflow or tour in the chat experience. Use this after search_workflows or view_workflow when the user wants to begin a named guided workflow.",
+    schema: startWorkflowSchema,
+    execute: async (params) => {
+      const { workflow, reason } = await resolveWorkflowFromInput(getters, params);
+      if (!workflow) {
+        return reason || "Workflow not found.";
+      }
+      const bridge = getExperienceToolBridge();
+      if (!bridge) {
+        return "Workflow launch is unavailable because no chat playback controller is mounted.";
+      }
+      bridge.startExperience(workflow, workflow.type, params.reviewMode ? {
+        reviewMode: true,
+        reviewMetadata: { trigger: "agent_tool" }
+      } : void 0);
+      return `Started workflow "${workflow.name}" (${workflow.id}).`;
+    }
+  };
+}
 var BUILTIN_ACTION_IDS = {
   screenshot: "take_screenshot",
   click: "click_element",
   fill: "fill_input",
   wait: "request_user_action",
   searchDocs: "search_docs",
-  searchTaggedElements: "search_tagged_elements"
+  searchTaggedElements: "search_tagged_elements",
+  searchWorkflows: "search_workflows",
+  viewWorkflow: "view_workflow",
+  startWorkflow: "start_workflow"
 };
-function useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl, websiteId) {
+function useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl, websiteId, toursApiBase, userProfile) {
   const registeredRef = (0, import_react8.useRef)(false);
   const tagStoreRef = (0, import_react8.useRef)(tagStore);
   tagStoreRef.current = tagStore;
@@ -2299,18 +2651,33 @@ function useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl
   serverUrlRef.current = serverUrl;
   const websiteIdRef = (0, import_react8.useRef)(websiteId);
   websiteIdRef.current = websiteId;
+  const toursApiBaseRef = (0, import_react8.useRef)(toursApiBase);
+  toursApiBaseRef.current = toursApiBase;
+  const userProfileRef = (0, import_react8.useRef)(userProfile);
+  userProfileRef.current = userProfile;
   (0, import_react8.useEffect)(() => {
     if (registeredRef.current) return;
     registeredRef.current = true;
     const getTagStore = () => tagStoreRef.current;
     const getServerUrl = () => serverUrlRef.current;
     const getWebsiteId = () => websiteIdRef.current;
+    const getToursApiBase = () => toursApiBaseRef.current;
+    const getUserProfile = () => userProfileRef.current;
+    const workflowToolGetters = {
+      serverUrl: getServerUrl,
+      websiteId: getWebsiteId,
+      toursApiBase: getToursApiBase,
+      userProfile: getUserProfile
+    };
     registerAction(BUILTIN_SCREENSHOT_ACTION);
     registerAction(createClickAction(getTagStore));
     registerAction(createFillAction(getTagStore));
     registerAction(createWaitAction(getTagStore));
     registerAction(createSearchDocsAction(getServerUrl, getWebsiteId));
     registerAction(createSearchTaggedElementsAction(getTagStore));
+    registerAction(createSearchWorkflowsAction(workflowToolGetters));
+    registerAction(createViewWorkflowAction(workflowToolGetters));
+    registerAction(createStartWorkflowAction(workflowToolGetters));
     return () => {
       unregisterAction(BUILTIN_SCREENSHOT_ACTION.id);
       unregisterAction(BUILTIN_ACTION_IDS.click);
@@ -2318,6 +2685,9 @@ function useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl
       unregisterAction(BUILTIN_ACTION_IDS.wait);
       unregisterAction(BUILTIN_ACTION_IDS.searchDocs);
       unregisterAction(BUILTIN_ACTION_IDS.searchTaggedElements);
+      unregisterAction(BUILTIN_ACTION_IDS.searchWorkflows);
+      unregisterAction(BUILTIN_ACTION_IDS.viewWorkflow);
+      unregisterAction(BUILTIN_ACTION_IDS.startWorkflow);
       registeredRef.current = false;
     };
   }, [registerAction, unregisterAction]);
@@ -2572,120 +2942,6 @@ function readPreviewSessionSuppression() {
   }
 }
 
-// src/utils/tourDiscovery.ts
-async function fetchTours(serverUrl, toursApiBase, websiteId, userType, userId, experienceType = "tour") {
-  try {
-    const params = new URLSearchParams({
-      websiteId,
-      userType
-    });
-    if (userId) params.set("userId", userId);
-    if (experienceType !== "tour") params.set("type", experienceType);
-    const res = await fetch(getTourApiUrl(serverUrl, toursApiBase, `/tours?${params.toString()}`));
-    if (!res.ok) return [];
-    const data = await res.json();
-    return data.tours ?? [];
-  } catch {
-    return [];
-  }
-}
-async function fetchTourById(serverUrl, toursApiBase, tourId, experienceType = "tour", websiteId) {
-  try {
-    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}`), websiteId));
-    if (experienceType !== "tour") {
-      url.searchParams.set("type", experienceType);
-    }
-    const res = await fetch(url.toString());
-    if (!res.ok) {
-      return null;
-    }
-    const data = await res.json();
-    return data.tour ?? null;
-  } catch {
-    return null;
-  }
-}
-async function markTourComplete(serverUrl, toursApiBase, tourId, userId, experienceType = "tour", websiteId) {
-  try {
-    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/complete`), websiteId));
-    if (experienceType !== "tour") {
-      url.searchParams.set("type", experienceType);
-    }
-    await fetch(url.toString(), {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ userId })
-    });
-  } catch {
-  }
-}
-async function markTourDismissed(serverUrl, toursApiBase, tourId, userId, experienceType = "tour", websiteId) {
-  try {
-    const url = new URL(withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/dismiss`), websiteId));
-    if (experienceType !== "tour") {
-      url.searchParams.set("type", experienceType);
-    }
-    await fetch(url.toString(), {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ userId })
-    });
-  } catch {
-  }
-}
-async function recordTourEvent(serverUrl, toursApiBase, tourId, userId, eventType, websiteId) {
-  try {
-    const url = withWebsiteId(getTourApiUrl(serverUrl, toursApiBase, `/tours/${tourId}/events`), websiteId);
-    await fetch(url, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ userId, eventType })
-    });
-  } catch {
-  }
-}
-function getToursBaseUrl(serverUrl, toursApiBase) {
-  if (toursApiBase?.startsWith("/")) {
-    return `${typeof window !== "undefined" ? window.location.origin : ""}${toursApiBase.replace(/\/$/, "")}`;
-  }
-  return serverUrl.replace(/\/$/, "");
-}
-function getTourApiUrl(serverUrl, toursApiBase, path) {
-  const base = getToursBaseUrl(serverUrl, toursApiBase);
-  return toursApiBase ? `${base}${path}` : `${base}/api${path}`;
-}
-function withWebsiteId(url, websiteId) {
-  if (!websiteId) {
-    return url;
-  }
-  const baseOrigin = typeof window !== "undefined" ? window.location.origin : "http://localhost";
-  const resolved = new URL(url, baseOrigin);
-  resolved.searchParams.set("websiteId", websiteId);
-  return resolved.toString();
-}
-function normalizeTrigger(trigger) {
-  if (trigger === "feature_launch" || trigger === "feature_unlocked" || trigger === "feature_unlock" || trigger === "new_feature") {
-    return "feature_launch";
-  }
-  return trigger ?? "first_visit";
-}
-function getStartPolicy(tour) {
-  return tour.startPolicy ?? (normalizeTrigger(tour.trigger) === "manual" ? "immediate_start" : "prompt_only");
-}
-function getNotificationType(tour) {
-  return tour.notificationType ?? "bubble_card";
-}
-function isTourEligible(tour, userProfile) {
-  switch (normalizeTrigger(tour.trigger)) {
-    case "first_visit":
-      return !!userProfile.isNewUser;
-    case "manual":
-      return false;
-    default:
-      return false;
-  }
-}
-
 // src/hooks/useTourPlayback.ts
 var import_react12 = require("react");
 
@@ -8196,6 +8452,58 @@ function buildTranscriptPreviewLines(transcript, options = {}) {
   return lines.slice(-maxLines);
 }
 
+// src/utils/pendingPromptUi.ts
+function isPendingReviewPrompt(pendingPrompt) {
+  return Boolean(pendingPrompt?.options?.reviewMode);
+}
+function shouldRenderPendingPromptInline({
+  pendingPrompt,
+  isPlaybackActive,
+  recordingMode
+}) {
+  return Boolean(
+    pendingPrompt && !isPlaybackActive && !recordingMode && !isPendingReviewPrompt(pendingPrompt)
+  );
+}
+function shouldRenderPendingPromptModal({
+  pendingPrompt,
+  isPlaybackActive,
+  recordingMode,
+  pendingNotificationType
+}) {
+  return Boolean(
+    pendingPrompt && !isPlaybackActive && !recordingMode && isPendingReviewPrompt(pendingPrompt) && pendingNotificationType === "modal"
+  );
+}
+function shouldAutoExpandForPendingPrompt({
+  pendingPrompt,
+  isPlaybackActive,
+  recordingMode,
+  pendingNotificationType
+}) {
+  if (!pendingPrompt || isPlaybackActive || recordingMode) return false;
+  return pendingNotificationType === "bubble_card" || shouldRenderPendingPromptInline({
+    pendingPrompt,
+    isPlaybackActive,
+    recordingMode
+  });
+}
+function getPendingPromptTitle(pendingPrompt) {
+  return `I found a ${pendingPrompt.experienceType === "onboarding" ? "workflow" : "tour"} called "${pendingPrompt.tour.name}". Would you like to start it now?`;
+}
+function getPendingPromptReason(pendingPrompt) {
+  if (pendingPrompt.tour.trigger === "first_visit") {
+    return "This was surfaced because the current user matches the configured first-visit trigger.";
+  }
+  if (pendingPrompt.tour.trigger === "return_visit") {
+    return "This was surfaced because the current user matches the configured return-visit trigger.";
+  }
+  if (pendingPrompt.tour.featureKey) {
+    return `This was surfaced because the "${pendingPrompt.tour.featureKey}" trigger condition matched.`;
+  }
+  return "This was surfaced because the configured trigger condition matched.";
+}
+
 // src/utils/floatingLiveTranscript.ts
 var floatingTranscriptEl = null;
 var liveTranscriptSuppressed = false;
@@ -8549,6 +8857,7 @@ function Tooltip({ children, title }) {
   );
 }
 var BUBBLE_EXPANDED_STORAGE_KEY = "modelnex-chat-bubble-expanded";
+var BUBBLE_DOCKED_STORAGE_KEY = "modelnex-chat-bubble-docked";
 var TOUR_MINIMIZED_STORAGE_KEY = "modelnex-tour-bubble-minimized";
 var BotIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "var(--modelnex-bubble-icon-size, 20px)", height: "var(--modelnex-bubble-icon-size, 20px)", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }),
@@ -8562,6 +8871,18 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { wid
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
 ] });
 var MinimizeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 18h8" }) });
+var DockIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 3v10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m8 9 4 4 4-4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 17h16" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M6 21h12" })
+] });
+var UndockIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 21V11" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m8 15 4-4 4 4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 7h16" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M6 3h12" })
+] });
 var TrashIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 6h18" }),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
@@ -8782,6 +9103,7 @@ function ModelNexChatBubble({
   const ctx = (0, import_react18.useContext)(ModelNexContext);
   const [hydrated, setHydrated] = (0, import_react18.useState)(false);
   const [expanded, setExpanded] = (0, import_react18.useState)(false);
+  const [docked, setDocked] = (0, import_react18.useState)(false);
   const [input, setInput] = (0, import_react18.useState)("");
   const messages = ctx?.chatMessages ?? [];
   const setMessages = ctx?.setChatMessages ?? (() => {
@@ -8836,6 +9158,11 @@ function ModelNexChatBubble({
   const activePlayback = playbackController.playback;
   const activeExperienceType = playbackController.activeExperienceType;
   const startingExperienceType = playbackController.startingExperienceType;
+  (0, import_react18.useEffect)(() => {
+    return registerExperienceToolBridge({
+      startExperience: playbackController.startExperience
+    });
+  }, [playbackController.startExperience]);
   const createPlaybackView = (0, import_react18.useCallback)((experienceType) => {
     const isActiveExperience = activePlayback.isActive && activeExperienceType === experienceType;
     const pendingTour = playbackController.pendingPrompt?.experienceType === experienceType ? playbackController.pendingPrompt.tour : null;
@@ -8915,13 +9242,28 @@ function ModelNexChatBubble({
     }
   }, [devMode, handleAutoTag, ctx?.extractedElements.length, window.location.pathname]);
   const onboardingReviewToggle = getReviewModeToggleConfig(onboardingPlayback.playbackState);
+  const pendingPrompt = playbackController.pendingPrompt;
   const pendingNotificationType = (onboardingPlayback.pendingTour || tourPlayback.pendingTour)?.notificationType ?? "bubble_card";
+  const isPlaybackActive = tourPlayback.isActive || onboardingPlayback.isActive;
+  const renderPendingPromptInline = shouldRenderPendingPromptInline({
+    pendingPrompt,
+    isPlaybackActive,
+    recordingMode
+  });
+  const renderPendingPromptModal = shouldRenderPendingPromptModal({
+    pendingPrompt,
+    isPlaybackActive,
+    recordingMode,
+    pendingNotificationType
+  });
   (0, import_react18.useEffect)(() => {
     setHydrated(true);
     try {
       setExpanded(sessionStorage.getItem(BUBBLE_EXPANDED_STORAGE_KEY) === "true");
+      setDocked(sessionStorage.getItem(BUBBLE_DOCKED_STORAGE_KEY) === "true");
     } catch {
       setExpanded(false);
+      setDocked(false);
     }
   }, []);
   const sttActiveRef = (0, import_react18.useRef)(false);
@@ -8981,11 +9323,23 @@ function ModelNexChatBubble({
     } catch {
     }
   }, [tourPlayback.isActive, onboardingPlayback.isActive]);
+  const setDockedState = (0, import_react18.useCallback)((next) => {
+    setDocked(next);
+    try {
+      sessionStorage.setItem(BUBBLE_DOCKED_STORAGE_KEY, String(next));
+    } catch {
+    }
+  }, []);
   (0, import_react18.useEffect)(() => {
-    if ((onboardingPlayback.pendingTour || tourPlayback.pendingTour) && !recordingMode && pendingNotificationType === "bubble_card") {
+    if (shouldAutoExpandForPendingPrompt({
+      pendingPrompt,
+      isPlaybackActive,
+      recordingMode,
+      pendingNotificationType
+    })) {
       setExpandedState(true);
     }
-  }, [onboardingPlayback.pendingTour, tourPlayback.pendingTour, recordingMode, pendingNotificationType, setExpandedState]);
+  }, [isPlaybackActive, pendingNotificationType, pendingPrompt, recordingMode, setExpandedState]);
   const preferredListeningExperienceRef = (0, import_react18.useRef)(null);
   const playbackVoiceRoutingRef = (0, import_react18.useRef)({
     activeExperienceType,
@@ -9086,13 +9440,13 @@ function ModelNexChatBubble({
     updateTourSttError
   ]);
   (0, import_react18.useEffect)(() => {
-    const isPlaybackActive = isTourListeningSessionActive({
+    const isPlaybackActive2 = isTourListeningSessionActive({
       isTourActive: tourPlayback.isActive,
       isOnboardingActive: onboardingPlayback.isActive,
       startingExperienceType
     });
-    const becameActive = isPlaybackActive && !previousTourActiveRef.current;
-    previousTourActiveRef.current = isPlaybackActive;
+    const becameActive = isPlaybackActive2 && !previousTourActiveRef.current;
+    previousTourActiveRef.current = isPlaybackActive2;
     if (becameActive) {
       try {
         sessionStorage.setItem(TOUR_MINIMIZED_STORAGE_KEY, "true");
@@ -9101,7 +9455,7 @@ function ModelNexChatBubble({
       setExpandedState(false, { rememberTourMinimize: true });
       updateTourSttError(null);
     }
-    if (!isPlaybackActive) {
+    if (!isPlaybackActive2) {
       try {
         sessionStorage.removeItem(TOUR_MINIMIZED_STORAGE_KEY);
       } catch {
@@ -9128,12 +9482,12 @@ function ModelNexChatBubble({
     }
   }, [recordingMode, setExpandedState]);
   (0, import_react18.useEffect)(() => {
-    const isPlaybackActive = isTourListeningSessionActive({
+    const isPlaybackActive2 = isTourListeningSessionActive({
       isTourActive: tourPlayback.isActive,
       isOnboardingActive: onboardingPlayback.isActive,
       startingExperienceType
     });
-    if (!isPlaybackActive) {
+    if (!isPlaybackActive2) {
       updateTourListenReady(false);
       setTourLiveTranscript("");
       hideFloatingLiveTranscript();
@@ -9142,12 +9496,12 @@ function ModelNexChatBubble({
     updateTourListenReady(Boolean(voice.isListening && sttActiveRef.current));
   }, [tourPlayback.isActive, onboardingPlayback.isActive, voice.isListening, startingExperienceType, updateTourListenReady]);
   (0, import_react18.useEffect)(() => {
-    const isPlaybackActive = isTourListeningSessionActive({
+    const isPlaybackActive2 = isTourListeningSessionActive({
       isTourActive: tourPlayback.isActive,
       isOnboardingActive: onboardingPlayback.isActive,
       startingExperienceType
     });
-    if (!isPlaybackActive && sttActiveRef.current) {
+    if (!isPlaybackActive2 && sttActiveRef.current) {
       sttActiveRef.current = false;
       updateTourListenReady(false);
       updateTourSttError(null);
@@ -9157,12 +9511,12 @@ function ModelNexChatBubble({
     }
   }, [tourPlayback.isActive, onboardingPlayback.isActive, voice, startingExperienceType, updateTourListenReady, updateTourSttError]);
   (0, import_react18.useEffect)(() => {
-    const isPlaybackActive = isTourListeningSessionActive({
+    const isPlaybackActive2 = isTourListeningSessionActive({
       isTourActive: tourPlayback.isActive,
       isOnboardingActive: onboardingPlayback.isActive,
       startingExperienceType
     });
-    if (!isPlaybackActive || tourListenReady || !voice.sttSupported || tourSttError === "not-allowed") {
+    if (!isPlaybackActive2 || tourListenReady || !voice.sttSupported || tourSttError === "not-allowed") {
       return;
     }
     const enableTourListeningFromGesture = (event) => {
@@ -9337,11 +9691,13 @@ function ModelNexChatBubble({
     fontFamily: "var(--modelnex-font)",
     ...themeStyles
   };
+  const desktopPanelHeight = docked ? "min(calc(100vh - 48px), calc(var(--modelnex-panel-max-height, 600px) + 180px))" : "var(--modelnex-panel-max-height, 600px)";
+  const desktopPanelMaxHeight = docked ? "calc(100vh - 48px)" : "calc(100vh - 120px)";
   const panelStyle = {
     width: isMobile ? "100%" : "var(--modelnex-panel-width, 380px)",
     maxWidth: "calc(100vw - 32px)",
-    height: isMobile ? "100%" : "var(--modelnex-panel-max-height, 600px)",
-    maxHeight: "calc(100vh - 120px)",
+    height: isMobile ? "100%" : desktopPanelHeight,
+    maxHeight: isMobile ? "100%" : desktopPanelMaxHeight,
     borderRadius: isMobile ? "0" : "var(--modelnex-radius-panel, 20px)",
     border: isMobile ? "none" : "1px solid var(--modelnex-border, #e4e4e7)",
     background: "var(--modelnex-bg, #ffffff)",
@@ -9369,8 +9725,8 @@ function ModelNexChatBubble({
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: containerStyle, className, "data-modelnex-internal": "true", onMouseDown: stopEventPropagation, onClick: stopEventPropagation, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: GLOBAL_STYLES }),
-      !(tourPlayback.isActive || onboardingPlayback.isActive) && (tourPlayback.pendingTour || onboardingPlayback.pendingTour) && pendingNotificationType === "modal" && !recordingMode && (() => {
-        const pt = onboardingPlayback.pendingTour || tourPlayback.pendingTour;
+      renderPendingPromptModal && (() => {
+        const pt = pendingPrompt?.tour;
         const mc = pt?.presentation?.modalConfig || {};
         return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
@@ -9432,8 +9788,8 @@ function ModelNexChatBubble({
                       "button",
                       {
                         onClick: () => {
-                          const preferredExperience = onboardingPlayback.pendingTour ? "onboarding" : "tour";
-                          if (onboardingPlayback.pendingTour) {
+                          const preferredExperience = pendingPrompt?.experienceType === "onboarding" ? "onboarding" : "tour";
+                          if (preferredExperience === "onboarding") {
                             onboardingPlayback.acceptPendingTour();
                           } else {
                             tourPlayback.acceptPendingTour();
@@ -9493,6 +9849,31 @@ function ModelNexChatBubble({
                 ] })
               ] }) }),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                !isMobile && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { title: docked ? "Undock" : "Dock", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  "button",
+                  {
+                    onClick: () => setDockedState(!docked),
+                    style: {
+                      padding: "8px 10px",
+                      borderRadius: "10px",
+                      border: "none",
+                      background: docked ? "rgba(79,70,229,0.08)" : "transparent",
+                      cursor: "pointer",
+                      color: docked ? "var(--modelnex-accent, #4f46e5)" : "#71717a",
+                      transition: "all 0.2s",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      fontSize: "12px",
+                      fontWeight: 700
+                    },
+                    "aria-label": docked ? "Undock chat bubble" : "Dock chat bubble",
+                    children: [
+                      docked ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UndockIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DockIcon, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: docked ? "Undock" : "Dock" })
+                    ]
+                  }
+                ) }),
                 (tourPlayback.isActive || onboardingPlayback.isActive || voice.isSpeaking) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { title: voice.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
@@ -9596,24 +9977,28 @@ function ModelNexChatBubble({
               children: "Microphone access is blocked. Use the input box below, or allow microphone permission and tap the mic again."
             }
           ),
-          !(tourPlayback.isActive || onboardingPlayback.isActive) && (tourPlayback.pendingTour || onboardingPlayback.pendingTour) && pendingNotificationType === "bubble_card" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          renderPendingPromptInline && pendingPrompt && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "div",
             {
               style: {
-                margin: "12px",
-                padding: "14px",
-                borderRadius: "12px",
-                border: "1px solid rgba(59,130,246,0.18)",
-                background: "linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(59,130,246,0.03) 100%)"
+                maxWidth: "85%",
+                padding: "12px 16px",
+                borderRadius: "var(--modelnex-radius-inner, 16px)",
+                borderBottomLeftRadius: 4,
+                fontSize: "14px",
+                lineHeight: 1.55,
+                background: "var(--modelnex-bg, #fff)",
+                color: "var(--modelnex-fg, #18181b)",
+                border: "1px solid var(--modelnex-border, #e4e4e7)",
+                boxShadow: "0 2px 4px rgba(0,0,0,0.02)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "13px", fontWeight: 600, color: "var(--modelnex-fg, #18181b)", marginBottom: "6px" }, children: onboardingPlayback.pendingTour ? "Suggested workflow" : "Suggested tour" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "14px", color: "var(--modelnex-fg, #27272a)", marginBottom: "6px" }, children: (onboardingPlayback.pendingTour || tourPlayback.pendingTour)?.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "12px", color: "#52525b", lineHeight: 1.45, marginBottom: "12px" }, children: (onboardingPlayback.pendingTour || tourPlayback.pendingTour)?.trigger === "first_visit" ? "Start a short walkthrough for this user now?" : (onboardingPlayback.pendingTour || tourPlayback.pendingTour)?.featureKey ? `A walkthrough is available for ${(onboardingPlayback.pendingTour || tourPlayback.pendingTour)?.featureKey}.` : "A walkthrough is available for this user." }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 500, marginBottom: "8px" }, children: getPendingPromptTitle(pendingPrompt) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "12px", color: "#52525b", marginBottom: "12px" }, children: getPendingPromptReason(pendingPrompt) }),
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { className: "btn btn-primary btn-sm", onClick: () => {
-                    const preferredExperience = onboardingPlayback.pendingTour ? "onboarding" : "tour";
-                    if (onboardingPlayback.pendingTour) {
+                    const preferredExperience = pendingPrompt.experienceType === "onboarding" ? "onboarding" : "tour";
+                    if (preferredExperience === "onboarding") {
                       onboardingPlayback.acceptPendingTour();
                     } else {
                       tourPlayback.acceptPendingTour();
@@ -9621,13 +10006,13 @@ function ModelNexChatBubble({
                     startTourListening(preferredExperience);
                   }, children: [
                     "Start ",
-                    onboardingPlayback.pendingTour ? "workflow" : "tour"
+                    pendingPrompt.experienceType === "onboarding" ? "workflow" : "tour"
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-secondary btn-sm", onClick: onboardingPlayback.pendingTour ? onboardingPlayback.dismissPendingTour : tourPlayback.dismissPendingTour, children: "Not now" })
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-secondary btn-sm", onClick: pendingPrompt.experienceType === "onboarding" ? onboardingPlayback.dismissPendingTour : tourPlayback.dismissPendingTour, children: "Not now" })
                 ] })
               ]
             }
-          ),
+          ) }),
           tourPlayback.isActive && tourPlayback.isReviewMode && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "div",
             {
@@ -10206,7 +10591,7 @@ function ModelNexChatBubble({
                     )
                   ] })
                 ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-                  messages.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  messages.length === 0 && !loading && !renderPendingPromptInline && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "div",
                     {
                       style: {
@@ -11279,7 +11664,7 @@ var ModelNexProvider = ({
   }, []);
   const extractedElements = useAutoExtract();
   const tagStore = useTagStore({ serverUrl, websiteId });
-  useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl, websiteId);
+  useBuiltinActions(registerAction, unregisterAction, tagStore, serverUrl, websiteId, toursApiBase, userProfile);
   const CHAT_STORAGE_KEY = "modelnex-chat-messages";
   const [chatMessages, setChatMessagesRaw] = (0, import_react21.useState)([]);
   (0, import_react21.useEffect)(() => {