@marketrix.ai/widget 1.0.2 → 1.0.3

package/README.md

@@ -30,9 +30,11 @@ Add the widget to your HTML page using a script tag:
 
 ```html
 <script
-  src="path/to/meet.js"
-  marketrix-id="your-marketrix-id"
-  marketrix-key="your-marketrix-key"
+  src="path/to/index.mjs"
+  mtx-ai-host="https://agent.marketrix.ai"
+  mtx-api-host="https://api.marketrix.ai"
+  mtx-id="your-marketrix-id"
+  mtx-key="your-marketrix-key"
 ></script>
 ```
 
@@ -42,13 +44,11 @@ You can customize the widget using data attributes:
 
 ```html
 <script
-  src="path/to/meet.js"
-  marketrix-id="your-marketrix-id"
-  marketrix-key="your-marketrix-key"
-  data-position="bottom_right"
-  data-theme="light"
-  data-agent-name="Support Agent"
-  data-api-base-url="https://api.marketrix.com"
+  src="path/to/index.mjs"
+  mtx-ai-host="https://agent.marketrix.ai"
+  mtx-api-host="https://api.marketrix.ai"
+  mtx-id="your-marketrix-id"
+  mtx-key="your-marketrix-key"
 ></script>
 ```
 
@@ -229,9 +229,11 @@ npx serve dist -l 5174 --cors
 ```javascript
 javascript: (function () {
   var s = document.createElement('script');
-  s.src = 'http://localhost:5174/meet.js';
-  s.setAttribute('marketrix-agent', 'YOUR_AGENT_ID');
-  s.setAttribute('marketrix-connection-id', 'YOUR_CONNECTION_ID');
+  s.src = 'http://localhost:5174/index.mjs';
+  s.setAttribute('mtx-ai-host', 'https://agent.marketrix.ai');
+  s.setAttribute('mtx-api-host', 'https://api.marketrix.ai');
+  s.setAttribute('mtx-app', 'YOUR_APP_ID');
+  s.setAttribute('mtx-agent', 'YOUR_AGENT_ID');
   document.head.appendChild(s);
 })();
 ```
@@ -247,9 +249,11 @@ First visit `https://localhost:5174` and accept the certificate, then use:
 ```javascript
 javascript: (function () {
   var s = document.createElement('script');
-  s.src = 'https://localhost:5174/meet.js';
-  s.setAttribute('marketrix-agent', 'YOUR_AGENT_ID');
-  s.setAttribute('marketrix-connection-id', 'YOUR_CONNECTION_ID');
+  s.src = 'https://localhost:5174/index.mjs';
+  s.setAttribute('mtx-ai-host', 'https://agent.marketrix.ai');
+  s.setAttribute('mtx-api-host', 'https://api.marketrix.ai');
+  s.setAttribute('mtx-app', 'YOUR_APP_ID');
+  s.setAttribute('mtx-agent', 'YOUR_AGENT_ID');
   document.head.appendChild(s);
 })();
 ```
@@ -259,9 +263,11 @@ javascript: (function () {
 ```javascript
 javascript: (function () {
   var s = document.createElement('script');
-  s.src = 'https://cdn.marketrix.io/widget/dev/meet.js';
-  s.setAttribute('marketrix-agent', 'YOUR_AGENT_ID');
-  s.setAttribute('marketrix-connection-id', 'YOUR_CONNECTION_ID');
+  s.src = 'https://cdn.marketrix.io/widget/dev/index.mjs';
+  s.setAttribute('mtx-ai-host', 'https://agent.marketrix.ai');
+  s.setAttribute('mtx-api-host', 'https://api.marketrix.ai');
+  s.setAttribute('mtx-app', 'YOUR_APP_ID');
+  s.setAttribute('mtx-agent', 'YOUR_AGENT_ID');
   document.head.appendChild(s);
 })();
 ```
@@ -286,12 +292,14 @@ create a new script:
   'use strict';
   var script = document.createElement('script');
   // Use one of the following sources:
-  // Local dev server (HTTPS): script.src = "https://localhost:5174/meet.js";
-  // Local built version: script.src = "http://localhost:5174/meet.js";
+  // Local dev server (HTTPS): script.src = "https://localhost:5174/index.mjs";
+  // Local built version: script.src = "http://localhost:5174/index.mjs";
   // Production CDN:
-  script.src = 'https://cdn.marketrix.io/widget/dev/meet.js';
-  script.setAttribute('marketrix-agent', 'YOUR_AGENT_ID');
-  script.setAttribute('marketrix-connection-id', 'YOUR_CONNECTION_ID');
+  script.src = 'https://cdn.marketrix.io/widget/dev/index.mjs';
+  s.setAttribute('mtx-ai-host', 'https://agent.marketrix.ai');
+  s.setAttribute('mtx-api-host', 'https://api.marketrix.ai');
+  script.setAttribute('mtx-app', 'YOUR_APP_ID');
+  script.setAttribute('mtx-agent', 'YOUR_AGENT_ID');
   document.head.appendChild(script);
 })();
 ```
@@ -352,7 +360,7 @@ widget/
 ├── vite.config.ts          # Vite configuration
 ├── tailwind.config.js      # Tailwind configuration
 └── dist/                   # Build output
-    ├── meet.js             # Main widget bundle (IIFE)
+    ├── index.mjs           # Main widget bundle (IIFE)
     └── index.html          # Demo page
 ```
 
@@ -363,27 +371,23 @@ The widget uses Vite with a custom CSS injection plugin that:
 - Bundles all dependencies (React, etc.) into a single file
 - Injects CSS directly into the JavaScript bundle
 - Outputs an IIFE (Immediately Invoked Function Expression) format
-- Creates a standalone `meet.js` file with no external dependencies
+- Creates a standalone `index.mjs` file with no external dependencies
 
 ## API Reference
 
 ### Functions
 
-#### `initMarketrixWidget(config: MarketrixConfig)`
+#### `mountWidget(config: MarketrixConfig)`
 
-Initializes the widget with the provided configuration.
+Initializes the widget and adds it into the DOM.
 
-#### `destroyMarketrixWidget()`
+#### `unmountWidget()`
 
 Destroys the widget and removes it from the DOM.
 
-#### `updateMarketrixConfig(newConfig: Partial<MarketrixConfig>)`
+#### `previewWidget(config: MarketrixConfig)`
 
-Updates the widget configuration dynamically.
-
-#### `getCurrentConfig(): MarketrixConfig`
-
-Returns the current widget configuration.
+Previews the widget for quick appearance-checking.
 
 ### Types
 

package/dist/components/chat/ChatWindow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWindow.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatWindow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAcjD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ9E,UAAU,eAAe;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,EAAE,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,CACb,OAAO,EAAE,MAAM,EACf,IAAI,CAAC,EAAE,eAAe,EACtB,YAAY,CAAC,EAAE,MAAM,EACrB,QAAQ,CAAC,EAAE,MAAM,EACjB,eAAe,CAAC,EAAE,OAAO,KACtB,IAAI,CAAC;IACV,SAAS,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5E,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwsBhD,CAAC"}
+{"version":3,"file":"ChatWindow.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatWindow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAcjD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ9E,UAAU,eAAe;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,EAAE,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,CACb,OAAO,EAAE,MAAM,EACf,IAAI,CAAC,EAAE,eAAe,EACtB,YAAY,CAAC,EAAE,MAAM,EACrB,QAAQ,CAAC,EAAE,MAAM,EACjB,eAAe,CAAC,EAAE,OAAO,KACtB,IAAI,CAAC;IACV,SAAS,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5E,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+tBhD,CAAC"}

package/dist/components/layout/WidgetButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetButton.d.ts","sourceRoot":"","sources":["../../../src/components/layout/WidgetButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAInD,UAAU,iBAAiB;IACzB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiMpD,CAAC"}
+{"version":3,"file":"WidgetButton.d.ts","sourceRoot":"","sources":["../../../src/components/layout/WidgetButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAInD,UAAU,iBAAiB;IACzB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwNpD,CAAC"}

package/dist/index.mjs

@@ -11807,7 +11807,9 @@ const ChatWindow = ({
 }) => {
   const [inputValue, setInputValue] = useState("");
   const messagesEndRef = useRef(null);
+  const chatWindowRef = useRef(null);
   const [isScreenSharing$1, setIsScreenSharing] = useState(false);
+  const [isPreviewMode, setIsPreviewMode] = useState(false);
   const [screenShareMessageId, setScreenShareMessageId] = useState(null);
   const [screenAccessRequestMessageId, setScreenAccessRequestMessageId] = useState(
     null
@@ -12014,6 +12016,19 @@ const ChatWindow = ({
   };
   const effectivePosition = widgetPosition.position || settings.widget_position || "bottom_right";
   const positionClasses = getPositionClasses(effectivePosition);
+  useEffect(() => {
+    if (chatWindowRef.current) {
+      const rootNode = chatWindowRef.current.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        const host = rootNode.host;
+        if (host && host.parentElement && host.parentElement !== document.body) {
+          setIsPreviewMode(true);
+          return;
+        }
+      }
+      setIsPreviewMode(false);
+    }
+  }, []);
   if (!isOpen) return null;
   const customStyles = {
     width: settings.widget_width,
@@ -12045,10 +12060,12 @@ const ChatWindow = ({
       return this.props.children;
     }
   }
+  const positionClass = isPreviewMode ? "absolute" : "fixed";
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `fixed rounded-xl ${positionClasses} pointer-events-auto`,
+      ref: chatWindowRef,
+      className: `${positionClass} rounded-xl ${positionClasses} pointer-events-auto`,
       style: {
         zIndex: widgetPosition.z_index || 40,
         backgroundColor: "#ffffff",
@@ -12421,8 +12438,23 @@ const WidgetButton = ({
   isScreenSharing: isScreenSharing2 = false
 }) => {
   const [showWelcomeText, setShowWelcomeText] = useState(false);
+  const [isPreviewMode, setIsPreviewMode] = useState(false);
+  const buttonRef = React.useRef(null);
   const { getWidgetPosition: getWidgetPosition2, settings } = useWidget({ config });
   const widgetPosition = getWidgetPosition2();
+  useEffect(() => {
+    if (buttonRef.current) {
+      const rootNode = buttonRef.current.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        const host = rootNode.host;
+        if (host && host.parentElement && host.parentElement !== document.body) {
+          setIsPreviewMode(true);
+          return;
+        }
+      }
+      setIsPreviewMode(false);
+    }
+  }, []);
   useEffect(() => {
     setShowWelcomeText(false);
     if (isMinimized) {
@@ -12440,10 +12472,12 @@ const WidgetButton = ({
   }, [settings.widget_appearance, isMinimized]);
   const effectivePosition = widgetPosition.position || settings.widget_position || "bottom_right";
   const effectivePositionClasses = getPositionClasses(effectivePosition);
+  const positionClass = isPreviewMode ? "absolute" : "fixed";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `fixed ${effectivePositionClasses} transition-transform duration-500 ease-in-out ${showWelcomeText && !isOpen ? effectivePosition.includes("left") ? "transform translate-x-64" : "transform -translate-x-64" : ""}`,
+      ref: buttonRef,
+      className: `${positionClass} ${effectivePositionClasses} transition-transform duration-500 ease-in-out ${showWelcomeText && !isOpen ? effectivePosition.includes("left") ? "transform translate-x-64" : "transform -translate-x-64" : ""}`,
       style: { zIndex: widgetPosition.z_index || 50 },
       children: [
         /* @__PURE__ */ jsx(