@modelnex/sdk 0.5.8 → 0.5.10

package/dist/index.d.mts

@@ -827,6 +827,10 @@ interface ModelNexProviderProps {
      * userId — used for per-user tour completion state
      */
     userProfile?: UserProfile;
+    /**
+     * Same-origin base for tour API (avoids CORS for ?modelnex_test_tour=)
+     */
+    toursApiBase?: string;
     /**
      * Enable SDK dev tools unconditionally (tour recording, studio mode)
      */

package/dist/index.d.ts

@@ -827,6 +827,10 @@ interface ModelNexProviderProps {
      * userId — used for per-user tour completion state
      */
     userProfile?: UserProfile;
+    /**
+     * Same-origin base for tour API (avoids CORS for ?modelnex_test_tour=)
+     */
+    toursApiBase?: string;
     /**
      * Enable SDK dev tools unconditionally (tour recording, studio mode)
      */

package/dist/index.js

@@ -222,6 +222,18 @@ var ModelNexContext = (0, import_react.createContext)(null);
 var import_react3 = require("react");
 var import_socket = require("socket.io-client");
 
+// src/utils/socket-io-transports.ts
+function resolveSocketIoTransports(serverUrl, order) {
+  try {
+    const host = new URL(serverUrl).hostname.toLowerCase();
+    if (host.endsWith("awsapprunner.com")) {
+      return ["polling"];
+    }
+  } catch {
+  }
+  return order === "websocket-first" ? ["websocket", "polling"] : ["polling", "websocket"];
+}
+
 // src/auto-extract.ts
 var import_react2 = require("react");
 function simpleHash(str) {
@@ -839,7 +851,10 @@ function useModelNexSocket({
       onSocketId?.(null);
       return;
     }
-    const socket = (0, import_socket.io)(serverUrl);
+    const socket = (0, import_socket.io)(serverUrl, {
+      path: "/socket.io",
+      transports: resolveSocketIoTransports(serverUrl, "polling-first")
+    });
     socketRef.current = socket;
     const buildSyncPayload = () => ({
       actions: serializeActions(actionsRef.current),
@@ -3180,7 +3195,7 @@ function useTourPlayback({
       const socket = io2(serverUrl, {
         path: "/socket.io",
         // standard
-        transports: ["websocket", "polling"]
+        transports: resolveSocketIoTransports(serverUrl, "websocket-first")
       });
       socketRef.current = socket;
       socket.on("connect", () => {
@@ -5435,7 +5450,7 @@ function useVoice(serverUrl) {
           mediaRecorderRef.current = recorder;
           const socket = io2(serverUrl, {
             path: "/socket.io",
-            transports: ["websocket", "polling"]
+            transports: resolveSocketIoTransports(serverUrl, "websocket-first")
           });
           sttSocketRef.current = socket;
           recorder.ondataavailable = (e) => {
@@ -8176,6 +8191,11 @@ 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 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" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+] });
 var StopIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) });
 var ChevronDown = ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { transform: open ? "rotate(180deg)" : "none", transition: "transform 0.2s" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 9 6 6 6-6" }) });
 function AgentTraces({ debug, command, defaultExpanded = true }) {
@@ -8237,7 +8257,7 @@ function AgentTraces({ debug, command, defaultExpanded = true }) {
       !hasTraceContent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "12px", padding: "8px", background: "#fef3c7", borderRadius: "4px", borderLeft: "3px solid #f59e0b" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 600, color: "#92400e", marginBottom: "4px" }, children: "No trace data" }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "10px", color: "#71717a", marginBottom: "6px" }, children: "The server may not have OPENROUTER_API_KEY set, or the request failed before the agent ran." }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "8px", background: "#fff", borderRadius: "4px", fontSize: "10px", overflow: "auto", maxHeight: "120px" }, children: JSON.stringify(debug, null, 2) })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "8px", background: "#fff", borderRadius: "4px", fontSize: "10px", overflow: "auto", maxHeight: "120px", color: "#27272a" }, children: JSON.stringify(debug, null, 2) })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
         debug.llmInput && traces.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "12px" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 600, color: "#3f3f46", marginBottom: "4px" }, children: "Input \u2192 agent" }),
@@ -8284,7 +8304,7 @@ function AgentTraces({ debug, command, defaultExpanded = true }) {
             isStepExpanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
               t.reasoning && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "6px" }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#71717a", marginBottom: "2px" }, children: "Reasoning" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "6px", background: "#fef3c7", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: "100px", overflow: "auto", borderLeft: "3px solid #f59e0b" }, children: t.reasoning })
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0, padding: "6px", background: "#fef3c7", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: "100px", overflow: "auto", borderLeft: "3px solid #f59e0b", color: "#451a03" }, children: t.reasoning })
               ] }),
               t.llmInput && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "6px" }, children: [
@@ -9144,6 +9164,15 @@ function ModelNexChatBubble({
                     children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BookOpenIcon, {})
                   }
                 ) }) }),
+                messages.length > 0 && !(tourPlayback.isActive || onboardingPlayback.isActive) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { title: "Clear chat", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    onClick: clearChat,
+                    style: { padding: "8px", borderRadius: "10px", border: "none", background: "transparent", cursor: "pointer", color: "#71717a" },
+                    "aria-label": "Clear chat",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TrashIcon, {})
+                  }
+                ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { title: "Minimize", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
@@ -10879,12 +10908,12 @@ var ModelNexProvider = ({
   children,
   websiteId,
   userProfile,
+  toursApiBase,
   devMode
 }) => {
   const serverUrl = DEFAULT_SERVER_URL2;
   const commandUrl = void 0;
   const disableSocket = false;
-  const toursApiBase = void 0;
   const renderedChildren = children;
   const [activeAgentActions, setActiveAgentActions] = (0, import_react21.useState)(/* @__PURE__ */ new Set());
   const [stagingFields, setStagingFields] = (0, import_react21.useState)(/* @__PURE__ */ new Set());
@@ -10975,12 +11004,13 @@ var ModelNexProvider = ({
       setChatMessages,
       websiteId,
       userProfile,
+      toursApiBase,
       voiceMuted,
       setVoiceMuted,
       socketId,
       devMode
     }),
-    [serverUrl, commandUrl, registerAction, unregisterAction, activeAgentActions, stagingFields, highlightActions, studioMode, recordingMode, extractedElements, tagStore, chatMessages, websiteId, userProfile, voiceMuted, socketId, devMode]
+    [serverUrl, commandUrl, registerAction, unregisterAction, activeAgentActions, stagingFields, highlightActions, studioMode, recordingMode, extractedElements, tagStore, chatMessages, websiteId, userProfile, toursApiBase, voiceMuted, socketId, devMode]
   );
   return import_react21.default.createElement(
     ModelNexContext.Provider,

package/dist/index.mjs

@@ -13,6 +13,18 @@ var ModelNexContext = createContext(null);
 import { useEffect as useEffect3, useRef as useRef3 } from "react";
 import { io } from "socket.io-client";
 
+// src/utils/socket-io-transports.ts
+function resolveSocketIoTransports(serverUrl, order) {
+  try {
+    const host = new URL(serverUrl).hostname.toLowerCase();
+    if (host.endsWith("awsapprunner.com")) {
+      return ["polling"];
+    }
+  } catch {
+  }
+  return order === "websocket-first" ? ["websocket", "polling"] : ["polling", "websocket"];
+}
+
 // src/auto-extract.ts
 import { useState, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
 function simpleHash(str) {
@@ -630,7 +642,10 @@ function useModelNexSocket({
       onSocketId?.(null);
       return;
     }
-    const socket = io(serverUrl);
+    const socket = io(serverUrl, {
+      path: "/socket.io",
+      transports: resolveSocketIoTransports(serverUrl, "polling-first")
+    });
     socketRef.current = socket;
     const buildSyncPayload = () => ({
       actions: serializeActions(actionsRef.current),
@@ -2971,7 +2986,7 @@ function useTourPlayback({
       const socket = io2(serverUrl, {
         path: "/socket.io",
         // standard
-        transports: ["websocket", "polling"]
+        transports: resolveSocketIoTransports(serverUrl, "websocket-first")
       });
       socketRef.current = socket;
       socket.on("connect", () => {
@@ -5226,7 +5241,7 @@ function useVoice(serverUrl) {
           mediaRecorderRef.current = recorder;
           const socket = io2(serverUrl, {
             path: "/socket.io",
-            transports: ["websocket", "polling"]
+            transports: resolveSocketIoTransports(serverUrl, "websocket-first")
           });
           sttSocketRef.current = socket;
           recorder.ondataavailable = (e) => {
@@ -7966,6 +7981,11 @@ var CloseIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "var(--modelnex-bubb
   /* @__PURE__ */ jsx4("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
 ] });
 var MinimizeIcon = () => /* @__PURE__ */ jsx4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M8 18h8" }) });
+var TrashIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsx4("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+  /* @__PURE__ */ jsx4("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+] });
 var StopIcon = () => /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) });
 var ChevronDown = ({ open }) => /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { transform: open ? "rotate(180deg)" : "none", transition: "transform 0.2s" }, children: /* @__PURE__ */ jsx4("path", { d: "m6 9 6 6 6-6" }) });
 function AgentTraces({ debug, command, defaultExpanded = true }) {
@@ -8027,7 +8047,7 @@ function AgentTraces({ debug, command, defaultExpanded = true }) {
       !hasTraceContent ? /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "12px", padding: "8px", background: "#fef3c7", borderRadius: "4px", borderLeft: "3px solid #f59e0b" }, children: [
         /* @__PURE__ */ jsx4("div", { style: { fontWeight: 600, color: "#92400e", marginBottom: "4px" }, children: "No trace data" }),
         /* @__PURE__ */ jsx4("div", { style: { fontSize: "10px", color: "#71717a", marginBottom: "6px" }, children: "The server may not have OPENROUTER_API_KEY set, or the request failed before the agent ran." }),
-        /* @__PURE__ */ jsx4("pre", { style: { margin: 0, padding: "8px", background: "#fff", borderRadius: "4px", fontSize: "10px", overflow: "auto", maxHeight: "120px" }, children: JSON.stringify(debug, null, 2) })
+        /* @__PURE__ */ jsx4("pre", { style: { margin: 0, padding: "8px", background: "#fff", borderRadius: "4px", fontSize: "10px", overflow: "auto", maxHeight: "120px", color: "#27272a" }, children: JSON.stringify(debug, null, 2) })
       ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
         debug.llmInput && traces.length === 0 && /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "12px" }, children: [
           /* @__PURE__ */ jsx4("div", { style: { fontWeight: 600, color: "#3f3f46", marginBottom: "4px" }, children: "Input \u2192 agent" }),
@@ -8074,7 +8094,7 @@ function AgentTraces({ debug, command, defaultExpanded = true }) {
             isStepExpanded && /* @__PURE__ */ jsxs3(Fragment2, { children: [
               t.reasoning && /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "6px" }, children: [
                 /* @__PURE__ */ jsx4("div", { style: { color: "#71717a", marginBottom: "2px" }, children: "Reasoning" }),
-                /* @__PURE__ */ jsx4("pre", { style: { margin: 0, padding: "6px", background: "#fef3c7", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: "100px", overflow: "auto", borderLeft: "3px solid #f59e0b" }, children: t.reasoning })
+                /* @__PURE__ */ jsx4("pre", { style: { margin: 0, padding: "6px", background: "#fef3c7", borderRadius: "4px", whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: "100px", overflow: "auto", borderLeft: "3px solid #f59e0b", color: "#451a03" }, children: t.reasoning })
               ] }),
               t.llmInput && /* @__PURE__ */ jsxs3(Fragment2, { children: [
                 /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "6px" }, children: [
@@ -8934,6 +8954,15 @@ function ModelNexChatBubble({
                     children: /* @__PURE__ */ jsx4(BookOpenIcon, {})
                   }
                 ) }) }),
+                messages.length > 0 && !(tourPlayback.isActive || onboardingPlayback.isActive) && /* @__PURE__ */ jsx4(Tooltip, { title: "Clear chat", children: /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    onClick: clearChat,
+                    style: { padding: "8px", borderRadius: "10px", border: "none", background: "transparent", cursor: "pointer", color: "#71717a" },
+                    "aria-label": "Clear chat",
+                    children: /* @__PURE__ */ jsx4(TrashIcon, {})
+                  }
+                ) }),
                 /* @__PURE__ */ jsx4(Tooltip, { title: "Minimize", children: /* @__PURE__ */ jsx4(
                   "button",
                   {
@@ -10669,12 +10698,12 @@ var ModelNexProvider = ({
   children,
   websiteId,
   userProfile,
+  toursApiBase,
   devMode
 }) => {
   const serverUrl = DEFAULT_SERVER_URL2;
   const commandUrl = void 0;
   const disableSocket = false;
-  const toursApiBase = void 0;
   const renderedChildren = children;
   const [activeAgentActions, setActiveAgentActions] = useState15(/* @__PURE__ */ new Set());
   const [stagingFields, setStagingFields] = useState15(/* @__PURE__ */ new Set());
@@ -10765,12 +10794,13 @@ var ModelNexProvider = ({
       setChatMessages,
       websiteId,
       userProfile,
+      toursApiBase,
       voiceMuted,
       setVoiceMuted,
       socketId,
       devMode
     }),
-    [serverUrl, commandUrl, registerAction, unregisterAction, activeAgentActions, stagingFields, highlightActions, studioMode, recordingMode, extractedElements, tagStore, chatMessages, websiteId, userProfile, voiceMuted, socketId, devMode]
+    [serverUrl, commandUrl, registerAction, unregisterAction, activeAgentActions, stagingFields, highlightActions, studioMode, recordingMode, extractedElements, tagStore, chatMessages, websiteId, userProfile, toursApiBase, voiceMuted, socketId, devMode]
   );
   return React8.createElement(
     ModelNexContext.Provider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelnex/sdk",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "description": "React SDK for natural language control of web apps via AI agents",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",