@deepfrog/pangents-widget 2.1.0 → 2.1.1

package/README.md

@@ -38,6 +38,7 @@ function App() {
         bubbleIcon: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
       }}
       position="bottom-right"
+      margin="20px" // Optional: adjust bubble margin
     />
   );
 }
@@ -62,6 +63,7 @@ function App() {
       bubbleIcon: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
     },
     position: 'bottom-right',
+    margin: '10px 20px', // Optional: adjust bubble margin
   });
 </script>
 ```
@@ -85,6 +87,7 @@ function App() {
       bubbleIcon: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
     },
     position: 'bottom-right',
+    margin: '10px 20px 30px 40px', // Optional: adjust bubble margin
   });
 </script>
 ```
@@ -97,7 +100,8 @@ function App() {
 | `tenantId` | `string` | Yes | Your tenant ID |
 | `email` | `string` | No | Optional email to pre-fill the login form |
 | `theme` | `object` | No | Theme customization options |
-| `position` | `string` | No | Widget position: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |
+| `position` | `string` | No | Widget position: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`. The popup will slide in from the corresponding side. |
+| `margin` | `string` | No | CSS margin for the bubble button. Supports all CSS margin formats: `'10px'`, `'10px 20px'`, `'10px 20px 30px'`, `'10px 20px 30px 40px'` |
 | `zIndex` | `number` | No | CSS z-index for the widget (default: 9999) |
 
 ### Theme Options

package/dist/preview.html

@@ -210,7 +210,8 @@ import Chatbot from "https://chat-widget-gamma-azure.vercel.app/widget.js";
         headerLogo: "<logo_url>",
         bubbleIcon: "<logo_url>",
       },
-      position: "bottom-right",
+      position: "bottom-right",  // Widget position: bottom-right, bottom-left, top-right, top-left
+      margin: "20px",            // Optional: CSS margin for bubble (e.g., "10px", "10px 20px 30px 40px")
     });
 &lt;/script&gt;</code></pre>
       </div>
@@ -237,7 +238,8 @@ import Chatbot from "https://chat-widget-gamma-azure.vercel.app/widget.js";
         headerLogo: null,
         bubbleIcon: "https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d",
       },
-      position: "bottom-right",
+      position: "bottom-left",
+      margin: "20px",
     });
   </script>
 </body>

package/dist/widget.js

@@ -24702,7 +24702,7 @@ const useEmailLeadsStore = create()(
     }
   }))
 );
-function WidgetBubble({ position = "bottom-right" }) {
+function WidgetBubble({ position = "bottom-right", margin }) {
   const { openWidget, theme, isOpen, isAuthenticated } = useChatContext();
   const { hasNewLeads, newLeadsCount, startPolling, stopPolling, clearNewLeadsNotification } = useEmailLeadsStore();
   reactExports.useEffect(() => {
@@ -24731,7 +24731,7 @@ function WidgetBubble({ position = "bottom-right" }) {
         return "fixed bottom-6 right-6 z-50";
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: getPositionClasses(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: getPositionClasses(), style: { margin: margin || void 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Button,
       {
@@ -36201,8 +36201,9 @@ function WidgetContent() {
     /* @__PURE__ */ jsxRuntimeExports.jsx(PoweredByFooter, {})
   ] });
 }
-function WidgetPopup() {
+function WidgetPopup({ position = "bottom-right" }) {
   const { isOpen, theme, closeWidget, isAuthenticated } = useChatContext();
+  const isLeftPosition = position === "bottom-left" || position === "top-left";
   const containerRef = reactExports.useRef(null);
   const [dimensions, setDimensions] = reactExports.useState(() => ({ width: Math.min(window.innerWidth * 0.38, 650), height: window.innerHeight }));
   const initialRoute = reactExports.useMemo(() => {
@@ -36344,10 +36345,10 @@ function WidgetPopup() {
           {
             ref: containerRef,
             id: "pangents-widget-container",
-            className: "fixed top-0 right-0",
-            initial: { x: "100%" },
+            className: `fixed top-0 ${isLeftPosition ? "left-0" : "right-0"}`,
+            initial: { x: isLeftPosition ? "-100%" : "100%" },
             animate: { x: 0 },
-            exit: { x: "100%" },
+            exit: { x: isLeftPosition ? "-100%" : "100%" },
             transition: { type: "spring", stiffness: 300, damping: 30 },
             role: "dialog",
             "aria-modal": "true",
@@ -36493,10 +36494,10 @@ function WidgetPopup() {
     }
   ) });
 }
-function Widget({ theme, className, position, pangentsApiKey, tenantId, email }) {
+function Widget({ theme, className, position, margin, pangentsApiKey, tenantId, email }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className, children: /* @__PURE__ */ jsxRuntimeExports.jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ChatProvider, { initialTheme: theme, apiKey: pangentsApiKey, tenantId, email, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetBubble, { position }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetPopup, {})
+    /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetBubble, { position, margin }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetPopup, { position })
   ] }) }) });
 }
 class ChatbotWidget {
@@ -36510,12 +36511,13 @@ class ChatbotWidget {
     if (this.container && this.root) {
       const themeChanged = JSON.stringify(this.config.theme) !== JSON.stringify(newConfig.theme);
       const positionChanged = this.config.position !== newConfig.position;
+      const marginChanged = this.config.margin !== newConfig.margin;
       const zIndexChanged = this.config.zIndex !== newConfig.zIndex;
-      if (themeChanged && !positionChanged && !zIndexChanged) {
+      if (themeChanged && !positionChanged && !marginChanged && !zIndexChanged) {
         this.config = newConfig;
         this.render();
         return;
-      } else if (positionChanged || zIndexChanged) {
+      } else if (positionChanged || marginChanged || zIndexChanged) {
         this.config = newConfig;
         this.createContainer();
         this.render();
@@ -36546,6 +36548,7 @@ class ChatbotWidget {
         {
           theme: this.config.theme,
           position: this.config.position,
+          margin: this.config.margin,
           pangentsApiKey: this.config.pangentsApiKey,
           tenantId: this.config.tenantId,
           email: this.config.email
@@ -36568,9 +36571,10 @@ class ChatbotWidget {
     const updatedConfig = { ...this.config, ...newConfig };
     JSON.stringify(this.config.theme) !== JSON.stringify(updatedConfig.theme);
     const positionChanged = this.config.position !== updatedConfig.position;
+    const marginChanged = this.config.margin !== updatedConfig.margin;
     const zIndexChanged = this.config.zIndex !== updatedConfig.zIndex;
     this.config = updatedConfig;
-    if (positionChanged || zIndexChanged) {
+    if (positionChanged || marginChanged || zIndexChanged) {
       this.createContainer();
       this.render();
     } else {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deepfrog/pangents-widget",
   "private": false,
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Pangents AI  - Embeddable AI widget for web applications",
   "type": "module",
   "main": "dist/index.cjs.js",